เพิ่ม 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

จบ

Leave a Reply