วิธีการตั้งค่าสภาพแวดล้อมผ่าน "ng บริการ" ใน Angular 6

ฉันกำลังพยายามอัปเดตแอป Angular 5.2 เป็น Angular 6 ฉันทำตามคำแนะนำในคู่มือการอัปเดต Angular เรียบร้อยแล้ว (รวมถึงการอัปเดตangular-cliเป็น v6) และตอนนี้ฉันกำลังพยายามให้บริการแอปผ่านทาง

ng serve --env=local

แต่นี่ทำให้ฉันเกิดข้อผิดพลาด:

ตัวเลือกที่ไม่รู้จัก: '--env'

ฉันใช้หลายสภาพแวดล้อม ( dev/local/prod) และนี่คือวิธีการทำงานใน Angular 5.2 ฉันจะตั้งค่าสภาพแวดล้อมใน Angular 6 ได้อย่างไร

คุณต้องใช้configurationตัวเลือกใหม่(ใช้ได้กับng buildและng serveเช่นกัน)

ng serve --configuration=local

หรือ

ng serve -c local

หากคุณดูที่angular.jsonไฟล์ของคุณคุณจะเห็นว่าคุณสามารถควบคุมการตั้งค่าสำหรับการกำหนดค่าแต่ละอย่างได้ดีขึ้น (aot, optimizer, ไฟล์สภาพแวดล้อม, ... )

"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"
      }
    ]
  }
}

คุณสามารถรับข้อมูลเพิ่มเติมได้ที่นี่สำหรับการจัดการการกำหนดค่าเฉพาะสภาพแวดล้อม

ตามที่ระบุไว้ในการตอบกลับอื่น ๆ ด้านล่างหากคุณต้องการเพิ่ม 'สภาพแวดล้อม' ใหม่คุณต้องเพิ่มการกำหนดค่าใหม่ให้กับงานสร้างและขึ้นอยู่กับความต้องการของคุณในการให้บริการและทดสอบงานด้วย

การเพิ่มสภาพแวดล้อมใหม่

แก้ไข : เพื่อให้ชัดเจนต้องระบุการแทนที่ไฟล์ในbuildส่วน ดังนั้นหากคุณต้องการใช้ng serveกับenvironmentไฟล์เฉพาะ(พูดdev2 ) คุณต้องแก้ไขbuildส่วนเพื่อเพิ่มการกำหนดค่าdev2ใหม่ก่อน

"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
        },

จากนั้นแก้ไขserveส่วนของคุณเพื่อเพิ่มการกำหนดค่าใหม่เช่นกันชี้ไปที่การกำหนดค่าdev2 ที่ buildคุณเพิ่งประกาศ

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

จากนั้นคุณสามารถใช้ng serve -c dev2ซึ่งจะใช้ไฟล์กำหนดค่า dev2

คำตอบนี้ดูเหมือนจะดี
อย่างไรก็ตามมันนำฉันไปสู่ข้อผิดพลาดเนื่องจากมี
Configuration 'xyz' could not be found in project ...
ข้อผิดพลาดในการสร้าง
ไม่เพียงต้องการการกำหนดค่าการสร้างที่ปรับปรุงแล้ว แต่ยังให้บริการ สิ่งที่ต้องการอีกด้วย

ดังนั้นเพียงเพื่อไม่ให้สับสน:

1. --env ไม่รองรับ angular 6
2. --envถูกเปลี่ยนเป็น--configuration|| -c(และตอนนี้มีพลังมากขึ้น)
3. เพื่อจัดการ envs ต่าง ๆ นอกเหนือจากการเพิ่มไฟล์สภาพแวดล้อมใหม่ตอนนี้จำเป็นต้องทำการเปลี่ยนแปลงบางอย่างในangular.jsonไฟล์:
   • เพิ่มการกำหนดค่าใหม่ในคุณสมบัติการสร้าง { ... "build": "configurations": ...
   • การกำหนดค่าการสร้างใหม่อาจมีเพียงfileReplacementsบางส่วน (แต่มีตัวเลือกเพิ่มเติม)
   • เพิ่มการกำหนดค่าใหม่ในการให้บริการ { ... "serve": "configurations": ...สถานที่ให้บริการ
   • การกำหนดค่าบริการใหม่จะต้องประกอบด้วยbrowserTarget="your-project-name:build:staging"

คุณสามารถลอง: ng serve --configuration=dev/prod

เพื่อสร้างการใช้งาน: ng build --prod --configuration=dev

หวังว่าคุณจะใช้สภาพแวดล้อมที่แตกต่าง

สำหรับ Angular 2 - 5 อ้างอิงบทความMultiple Environment ในเชิงมุม

สำหรับการใช้งานเชิงมุม 6 ng serve --configuration=dev

หมายเหตุ: อ้างอิงบทความเดียวกันสำหรับ angular 6 เช่นกัน แต่ไม่ว่าคุณ--envจะใช้ที่--configurationใดก็ตาม ใช้งานได้ดีสำหรับเชิงมุม 6

คุณสามารถใช้คำสั่งng serve -c devสำหรับสภาพแวดล้อมการพัฒนา ng serve -c prodสำหรับสภาพแวดล้อมการผลิต

ในขณะที่อาคารก็ใช้เช่นเดียวกัน คุณสามารถใช้ng build -c devสำหรับการสร้าง dev

Angular ไม่รองรับ --env แทนคุณต้องใช้

ng serve -c dev

สำหรับสภาพแวดล้อมการพัฒนาและ

ng serve -c prod 

สำหรับการผลิต

หมายเหตุ: -cหรือ--configuration

ใช้คำสั่งนี้สำหรับ Angular 6 เพื่อสร้าง

ng build --prod --configuration=dev