เพิ่ม Environment Variables ใหม่ใน Angular

ใน Angular โดยปกติจะมี environment มาให้ 2 environment คือ prod กับ ไม่ prod (เรียกรวม ๆ ว่า dev ละกัน) โดย environment ของ prod จะอยู่ที่ /src/environments/environment.prod.ts ส่วนอันที่เป็น dev จะอยู่ที่ /src/environments/environment.ts ซึ่งปกติเวลาเราสั่งคำสั่งผ่าน angular cli เช่น ng serve หรือ ng build มันจะเอาอันที่เป็น dev มาใช้ ถ้าต้องการใช้อันที่เป็น prod ต้องมีการประกาศอย่างชัด ๆ ว่าฉันจะเอา production นะ ผ่าน option — prod หรือ — environment=prod เช่น ng serve — environment=prod

ทีนี้ ถ้าเราอยู่ในสถานการณ์ที่ต้องมี environment มากกว่านี้อีก เช่น มี environment สำหรับ uat เราจะทำยังไง วิธีการง่ายนิดเดียว

1. สร้างไฟล์ environment ใหม่ วางไว้ที่เดียวกัน เช่น /src/environments/environment.uat.ts สำหรับ environment ชื่อ uat
2. ไปประกาศให้ angular cli รู้จัก uat environment ในไฟล์ .angular-cli.json เปิดเข้าไปดูตรงที่เขียนว่า

{
    // ...
    "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
    }
    // ...
}

แก้เป็น

{
    // ...
    "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "uat": "environments/environment.uat.ts"
    }
    // ...
}

ทีนี้ angular cli เราก็รู้จัก uat environment แล้ว สามารถเปิดใช้งานด้วย option — environment=uat

จบ

ping back: http://www.chonla.com/create-custom-environment-in-angular/