cara mengubah jalur dist-folder di angular-cli setelah 'ng build'

112

Saya ingin menggunakan angular-cli dengan inti asp.net dan saya perlu tahu bagaimana saya dapat mengubah jalur folder dist

cuppy
sumber

Jawaban:

74

Anda dapat memperbarui folder output di .angular-cli.json:

"outDir": "./location/toYour/dist"
shaun bradridge
sumber
14
Apakah mungkin untuk meletakkan index.html di ./location/toYour/dist dan bundel javascript dalam sub folder misalnya ./location/toYour/dist/bundles
Naveed Ahmed
1
Adakah yang tahu tentang pembaruan tentang menyesuaikan outDir lebih lanjut? css / ts / dalam jalur terpisah
fidev
190

Cara yang lebih baru untuk ini adalah dengan memperbarui outDirproperti di .angular-cli.json.

The ng buildargumen perintah --output-path(atau -opuntuk pendek) masih didukung juga, yang dapat berguna jika Anda ingin beberapa nilai, Anda dapat menyimpannya dalam Anda package.jsonsebagai skrip NPM.

Hati-hati: The .angular-cli.jsonproperti TIDAK disebut output-pathseperti jawaban yang saat ini diterima oleh @ cwill747 kata. Itu ng buildhanya argumennya.

Ini disebut outDirseperti yang disebutkan di atas, dan itu di bawah appsproperti.

.

PS

(Desember 2017)

1 tahun setelah menambahkan jawaban ini , seseorang menambahkan jawaban baru dengan informasi yang pada dasarnya sama, dan Poster Asli mengubah jawaban yang diterima menjadi jawaban terlambat 1 tahun yang berisi informasi yang sama di baris pertama ini.

Meligy
sumber
3
Apakah mungkin untuk meletakkan index.html di ./location/toYour/dist dan bundel JavaScript dalam sub folder misalnya ./location/toYour/dist/bundles
Naveed Ahmed
10
: D PS pahit
Sunil Kumar
4
PS terbaik yang pernah saya lihat di sini
Frenkey
dia mungkin mempromosikan temannya di sini, ini adalah korupsi
Alexander Borovoi
69

Untuk Angular 6+ banyak hal telah berubah sedikit.

Tentukan di mana build menghasilkan file aplikasi

Pengaturan Cli sekarang dilakukan di angular.json (diganti .angular-cli.json) di direktori root ruang kerja Anda. Jalur keluaran di angular.json default akan terlihat seperti ini (baris yang tidak relevan dihapus):

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

Jelas, ini akan menghasilkan aplikasi Anda di WORKSPACE / dist / my-app-name. Ubah outputPath jika Anda lebih suka direktori lain.

Anda dapat menimpa jalur keluaran menggunakan argumen baris perintah (misalnya untuk pekerjaan CI):

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

Sa https://github.com/angular/angular-cli/wiki/build

Menghosting aplikasi sudut di subdirektori

Menyetel jalur keluaran, akan memberi tahu angular di mana harus menempatkan file "terkompilasi" tetapi bagaimanapun Anda mengubah jalur keluaran, saat menjalankan aplikasi, angular akan tetap menganggap bahwa aplikasi dihosting di root dokumen server web.

Untuk membuatnya bekerja di sub direktori, Anda harus mengatur href dasar.

Di angular.json:

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

Cli:

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

Jika Anda tidak tahu di mana aplikasi akan dihosting pada waktu pembuatan, Anda dapat mengubah tag dasar di index.html yang dihasilkan.

Berikut adalah contoh bagaimana kami melakukannya di kontainer buruh pelabuhan kami:

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
Christoph Lütjen
sumber
46

Anda juga dapat menggunakan CLI, seperti:

ng build -prod --output-path=production

# or

ng serve --output-path=devroot
Marian Zburlea
sumber
1
Apakah mungkin untuk menimpa dir keluaran di angular-cli.json ?
Sergei Rudakov
Sepertinya fitur ini masuk dengan permintaan tarik ini: github.com/angular/angular-cli/pull/1109
Daniel Patrick
17

Satu-satunya hal yang berhasil bagi saya adalah mengubah outDirkedua angular-cli.jsonDAN src/tsconfig.json.

Saya ingin folder dist saya di luar folder proyek sudut. Jika saya tidak mengubah pengaturannya src/tsconfig.jsonjuga, CLI Angular akan memberikan peringatan setiap kali saya membangun proyek.

Berikut adalah baris yang paling penting ...

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

Dan ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}
NinjaFart
sumber
2
Hebat! Pembaruan untuk cli 7x, hal di atas dilakukan di angular.jsondan bidangnya outputPath( tsconfig penyesuaian di atas tetap sama). Hth
EdSF
17

Waspadalah: Jawaban yang benar ada di bawah. Ini tidak lagi berfungsi

Buat file bernama .ember-clidalam proyek Anda, dan sertakan di dalamnya konten berikut:

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

CLI Angular sekarang menggunakan file lingkungan untuk melakukan ini.

Pertama, tambahkan environmentsbagian keangular-cli.json

Sesuatu seperti :

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

Dan kemudian di dalam file lingkungan ( environments/environment.prod.tsdalam hal ini), tambahkan sesuatu seperti:

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

sekarang saat kamu lari:

ng build --prod

itu akan ditampilkan ke ./whatever/dist/folder.

swestner
sumber
1
Sepertinya jawaban terbaik, tetapi Angular CLI masih menerbitkan file saya di dist-folder. Versi:angular-cli: 1.0.0-beta.21
NinjaFart
Dari Angular CLI Wiki : outDir (string): Direktori keluaran untuk hasil build. Default-nya adalah dist /.
hbthanki
@hbthanki Thats the cli switch, bukan file lingkungan properti json
swestner
9

untuk halaman github yang saya gunakan

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

Inilah yang menyalin keluaran ke folder dokumen: --output-path=docs

unos baghaii
sumber
2

Pilihan lain adalah mengatur jalur webroot ke folder cli dist sudut. Di Program.cs Anda saat mengkonfigurasi WebHostBuilder, cukup ucapkan

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

atau apapun jalan menuju dist dir Anda.

Christian Götze
sumber