วิธีเปลี่ยนเส้นทางโฟลเดอร์ dist ใน angular-cli หลังจาก 'ng build'


112

ฉันต้องการใช้ angular-cli กับแกน asp.net และฉันต้องการทราบว่าฉันจะเปลี่ยนเส้นทางของโฟลเดอร์dist ได้อย่างไร

คำตอบ:


74

คุณสามารถอัพเดตโฟลเดอร์ผลลัพธ์ใน .angular-cli.json:

"outDir": "./location/toYour/dist"

14
เป็นไปได้หรือไม่ที่จะใส่ index.html ใน ./location/toYour/dist และ javascript บันเดิลในโฟลเดอร์ย่อยเช่น ./location/toYour/dist/bundles
Naveed Ahmed

1
ใครทราบข้อมูลอัปเดตเกี่ยวกับการปรับแต่ง outDir เพิ่มเติมหรือไม่? css / ts / ในเส้นทางแยก
fidev

190

วิธีที่เป็นปัจจุบันมากขึ้นนี้คือการปรับปรุงสถานที่ให้บริการในoutDir.angular-cli.json

ng buildโต้แย้งคำสั่ง--output-path(หรือ-opสั้น) ยังคงได้รับการสนับสนุนด้วยซึ่งจะเป็นประโยชน์ถ้าคุณต้องการค่าหลายรายการคุณสามารถบันทึกไว้ในคุณpackage.jsonเป็นสคริปต์ NPM

ระวัง:.angular-cli.jsonคุณสมบัติไม่ได้เรียกว่าoutput-pathเหมือนคำตอบในปัจจุบันได้รับการยอมรับโดย @ cwill747กล่าวว่า นั่นคือng buildข้อโต้แย้งเท่านั้น

เรียกว่าoutDirตามที่กล่าวไว้ข้างต้นและอยู่ภายใต้appsคุณสมบัติ

.

ปล

(ธันวาคม 2560)

1 ปีหลังจากเพิ่มคำตอบนี้มีคนเพิ่มคำตอบใหม่ที่มีข้อมูลเดิมเป็นหลักและผู้โพสต์ต้นฉบับได้เปลี่ยนคำตอบที่ยอมรับเป็นคำตอบช้าไป 1 ปีซึ่งมีข้อมูลเดียวกันในบรรทัดแรกของคำตอบนี้


3
เป็นไปได้หรือไม่ที่จะใส่ index.html ในกลุ่ม ./location/toYour/dist และ JavaScript ในโฟลเดอร์ย่อยเช่น ./location/toYour/dist/bundles
Naveed Ahmed

10
: D PS นั้นขมขื่น
Sunil Kumar

4
PS ที่ดีที่สุดที่ฉันเคยเห็นที่นี่
Frenkey

เขาอาจจะส่งเสริมเพื่อนของเขาที่นี่นี่เป็นการทุจริต
Alexander Borovoi

70

สำหรับ Angular 6+ มีการเปลี่ยนแปลงเล็กน้อย

กำหนดตำแหน่งที่ ng build สร้างไฟล์แอพ

ตอนนี้การตั้งค่าCliเสร็จสิ้นในangular.json (แทนที่ .angular-cli.json) ในไดเรกทอรีรากของพื้นที่ทำงานของคุณ พา ธ เอาต์พุตใน angular.json เริ่มต้นควรมีลักษณะดังนี้ (ลบบรรทัดที่ไม่เกี่ยวข้องออก):

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "outputPath": "dist/my-app-name",

เห็นได้ชัดว่าสิ่งนี้จะสร้างแอปของคุณใน WORKSPACE / dist / my-app-name ปรับเปลี่ยน outputPath ถ้าคุณต้องการไดเร็กทอรีอื่น

คุณสามารถเขียนทับเส้นทางเอาต์พุตโดยใช้อาร์กิวเมนต์บรรทัดคำสั่ง (เช่นสำหรับงาน CI):

ng build -op dist/example
ng build --output-path=dist/example

สาhttps://github.com/angular/angular-cli/wiki/build

การโฮสต์แอปเชิงมุมในไดเรกทอรีย่อย

การตั้งค่าพา ธ เอาต์พุตจะบอกตำแหน่งเชิงมุมว่าจะวางไฟล์ "คอมไพล์" ไว้ที่ใด แต่อย่างไรก็ตามคุณเปลี่ยนเส้นทางเอาต์พุตเมื่อเรียกใช้แอพเชิงมุมจะยังถือว่าแอพนั้นโฮสต์อยู่ในรูทเอกสารของเว็บเซิร์ฟเวอร์

เพื่อให้มันทำงานในไดเรกทอรีย่อยคุณจะต้องตั้งค่า href พื้นฐาน

ใน angular.json:

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "baseHref": "/my-folder/",

คลิ:

ng build --base-href=/my-folder/

หากคุณไม่ทราบว่าจะโฮสต์แอปไว้ที่ใดในเวลาสร้างคุณสามารถเปลี่ยนแท็กฐานใน index.html ที่สร้างขึ้น

นี่คือตัวอย่างวิธีที่เราทำในคอนเทนเนอร์นักเทียบท่าของเรา:

entrypoint.sh

if [ -n "${BASE_PATH}" ]
then
  files=( $(find . -name "index.html") )
  cp -n "${files[0]}" "${files[0]}.org"
  cp "${files[0]}.org" "${files[0]}"
  sed -i "s*<base href=\"/\">*<base href=\"${BASE_PATH}\">*g" "${files[0]}"
fi

46

คุณสามารถใช้ CLI ได้เช่นกัน:

ng build -prod --output-path=production

# or

ng serve --output-path=devroot

1
มันเป็นไปได้ที่จะเขียนทับ dir ผลลัพธ์ในมุม-cli.json ?
Sergei Rudakov

ดูเหมือนว่าคุณลักษณะนี้จะเข้ามาพร้อมกับคำขอดึงนี้: github.com/angular/angular-cli/pull/1109
Daniel Patrick

17

สิ่งเดียวที่ทำงานสำหรับฉันคือการเปลี่ยนoutDirในทั้งในและangular-cli.jsonsrc/tsconfig.json

ฉันต้องการโฟลเดอร์ dist ของฉันนอกโฟลเดอร์โครงการเชิงมุม หากฉันไม่ได้เปลี่ยนการตั้งค่าด้วยsrc/tsconfig.jsonเช่นกัน Angular CLI จะส่งคำเตือนทุกครั้งที่ฉันสร้างโครงการ

บรรทัดที่สำคัญที่สุดมีดังนี้ ...

// angular-cli.json
{
  ...
  "apps": [
    {
      "outDir": "../dist",
      ...
    }
  ],
  ...
}

และ ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}

2
สุดยอด! การอัปเดตสำหรับcli 7xข้างต้นเสร็จสิ้นในangular.jsonและฟิลด์คือoutputPath(การtsconfig ปรับปรุงด้านบนยังคงเหมือนเดิม) Hth
EdSF

17

ระวัง:คำตอบที่ถูกต้องอยู่ด้านล่าง วิธีนี้ใช้ไม่ได้อีกต่อไป

สร้างไฟล์ที่เรียกว่า.ember-cliในโครงการของคุณและรวมไว้ในเนื้อหาเหล่านี้:

{
   "output-path": "./location/to/your/dist/"
}

9

ตอนนี้ Angular CLI ใช้ไฟล์สภาพแวดล้อมเพื่อทำสิ่งนี้

ขั้นแรกให้เพิ่มenvironmentsส่วนในไฟล์angular-cli.json

สิ่งที่ต้องการ :

{
  "apps": [{
      "environments": {
        "prod": "environments/environment.prod.ts"
      }
    }]
}

จากนั้นภายในไฟล์สภาพแวดล้อม ( environments/environment.prod.tsในกรณีนี้) ให้เพิ่มสิ่งที่ต้องการ:

export const environment = {
  production: true,
  "output-path": "./whatever/dist/"
};

ตอนนี้เมื่อคุณเรียกใช้:

ng build --prod

มันจะส่งออกไปยัง./whatever/dist/โฟลเดอร์


1
ดูเหมือนคำตอบที่ดีที่สุด แต่ Angular CLI ยังคงเผยแพร่ไฟล์ของฉันในโฟลเดอร์ dist เวอร์ชั่น:angular-cli: 1.0.0-beta.21
NinjaFart

จาก Angular CLI Wiki : outDir (string): ไดเร็กทอรีเอาต์พุตสำหรับผลลัพธ์บิลด์ ค่าเริ่มต้นคือ dist /
hbthanki

@hbthanki นั่นคือสวิตช์ cli ไม่ใช่ไฟล์สภาพแวดล้อมคุณสมบัติ json
swestner

9

สำหรับหน้า github ที่ฉันใช้

ng build --prod --base-href "https://<username>.github.io/<RepoName>/" --output-path=docs

นี่คือสิ่งที่คัดลอกผลลัพธ์ไปยังโฟลเดอร์ docs: --output-path=docs


2

อีกทางเลือกหนึ่งคือกำหนดเส้นทาง webroot ไปยังโฟลเดอร์ angular cli dist ใน Program.cs ของคุณเมื่อกำหนดค่า WebHostBuilder เพียงแค่พูด

.UseWebRoot(Directory.GetCurrentDirectory() + "\\Frontend\\dist")

หรือเส้นทางไปยัง dir ของคุณคืออะไร

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.