Cara mengatur lingkungan melalui `ng serve` di Angular 6


169

Saya mencoba memperbarui aplikasi Angular 5.2 saya ke Angular 6. Saya berhasil mengikuti instruksi dalam panduan pembaruan Angular (termasuk pembaruan angular-cliuntuk ke v6), dan sekarang saya mencoba untuk melayani aplikasi melalui

ng serve --env=local

Tapi ini memberi saya kesalahan:

Opsi tidak dikenal: '--env'

Saya menggunakan beberapa lingkungan ( dev/local/prod), dan ini adalah cara kerjanya di Angular 5.2. Bagaimana saya mengatur lingkungan sekarang di Angular 6?


1
itu v6, Anda memperbarui angular-clibersama dengan seluruh aplikasi, jadi saya pikir itu jelas:]
Martin Adámek

5
Sangat membantu, Martin. Terima kasih untuk berbagi wawasan Anda. Faktanya itu tidak jelas.
Maxxx

Jawaban:


303

Anda perlu menggunakan configurationopsi baru (ini berfungsi untuk ng builddan ng servejuga)

ng serve --configuration=local

atau

ng serve -c local

Jika Anda melihat angular.jsonfile Anda, Anda akan melihat bahwa Anda memiliki kontrol yang lebih baik atas pengaturan untuk setiap konfigurasi (aot, optimizer, file lingkungan, ...)

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

Anda dapat memperoleh info lebih lanjut di sini untuk mengelola konfigurasi khusus lingkungan.

Seperti yang ditunjukkan dalam respons lain di bawah ini, jika Anda perlu menambahkan 'lingkungan' baru, Anda perlu menambahkan konfigurasi baru ke tugas pembangunan dan, tergantung pada kebutuhan Anda, untuk tugas-tugas melayani dan menguji juga.

Menambahkan lingkungan baru

Sunting : Agar jelas, penggantian file harus ditentukan di buildbagian ini. Jadi jika Anda ingin menggunakan file ng servetertentu environment(misalkan dev2 ), Anda harus terlebih dahulu memodifikasi buildbagian untuk menambahkan konfigurasi dev2 baru

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

Kemudian modifikasi servebagian Anda untuk menambahkan konfigurasi baru juga, menunjuk ke konfigurasi dev2 build yang baru saja Anda nyatakan

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

Kemudian Anda dapat menggunakan ng serve -c dev2, yang akan menggunakan file konfigurasi dev2


Anda tahu apakah mungkin juga menambahkan base-href dalam konfigurasi? atau hanya dalam membangun --c pementasan --base-href = / yyy /
Eduardo Tolino

@EduardoTolino: Ya Anda bisa, ada baseHrefopsi
David

Di mana saya bisa menentukan port debugging jarak jauh untuk lingkungan dev? Jadi untuk debug dengan VSCode. Dalam Angular 6tentu saja. Sehingga ng serveperintah tersebut menyertakan port debugger jarak jauh ketika meluncurkan Chromebrowser.
Stephane


1
ng serve -c local membutuhkan waktu untuk mengkompilasi aplikasi dibandingkan dengan "ng serve"
Vignesh

46

Jawaban ini sepertinya bagus.
Namun, itu mengarahkan saya ke kesalahan karena itu dihasilkan dengan
Configuration 'xyz' could not be found in project ...
kesalahan dalam membangun.
Diperlukan tidak hanya untuk memperbarui konfigurasi bangunan , tetapi juga melayani yang.

Jadi hanya untuk tidak meninggalkan kebingungan:

  1. --env tidak didukung di angular 6
  2. --envdiubah menjadi --configuration|| -c(dan sekarang lebih kuat)
  3. untuk mengelola berbagai env, selain menambahkan file lingkungan baru, sekarang diperlukan untuk melakukan beberapa perubahan pada angular.jsonfile:
    • tambahkan konfigurasi baru di properti build { ... "build": "configurations": ...
    • konfigurasi bangunan baru mungkin hanya berisi fileReplacementsbagian, (tetapi lebih banyak opsi tersedia)
    • tambahkan konfigurasi baru di properti serve { ... "serve": "configurations": ...
    • konfigurasi servis baru harus berisibrowserTarget="your-project-name:build:staging"

8

Anda dapat mencoba: ng serve --configuration=dev/prod

Untuk membangun gunakan: ng build --prod --configuration=dev

Semoga Anda menggunakan lingkungan yang berbeda.


ng serve --configuration = dev / prod command membutuhkan waktu dibandingkan dengan ng serve mengapa?
Vignesh

ng serve --configuration = prod membutuhkan waktu lebih lama daripada ng serve --configuration = prod karena minimisasi file dan karena kode siap produksi.
amku91

ok jika saya menggunakan perintah "ng serve --configuration = dev" berarti juga membutuhkan lebih banyak waktu
Vignesh

Tidak, seharusnya tidak perlu lebih banyak waktu. Lingkungan prod memiliki langkah-langkah ekstra untuk memperkecil, membasahi, dan mengoptimalkan kode untuk produksi. Lingkungan lain harus mengambil waktu normal, kecuali jika Anda secara eksplisit mengaktifkan langkah-langkah tambahan ini.
Reginaldo Camargo Ribeiro

6

Untuk Sudut 2 - 5 lihat artikel Multiple Environment di sudut

Untuk penggunaan Angular 6 ng serve --configuration=dev

Catatan: Lihat artikel yang sama untuk angular 6 juga. Tapi di mana pun Anda temukan --envgunakan --configuration. Itu bekerja dengan baik untuk sudut 6.


2

Anda dapat menggunakan perintah ng serve -c devuntuk lingkungan pengembangan ng serve -c produntuk lingkungan produksi

sementara membangun juga sama berlaku. Anda dapat menggunakan ng build -c devuntuk membangun dev


2

Angular tidak lagi mendukung --env sebagai gantinya Anda harus menggunakan

ng serve -c dev

untuk lingkungan pengembangan dan,

ng serve -c prod 

untuk produksi.

CATATAN: -catau--configuration


Ini ditanyakan & dijawab tahun lalu, juga jawaban Anda salah, -c(dengan tanda hubung tunggal) atau --configuration(dengan tanda hubung ganda).
Martin Adámek

0

Gunakan perintah ini untuk membangun Angular 6

ng build --prod --configuration=dev
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.