Angular 19 + PrimeNG ตอนที่ 8: การใช้งาน environment.ts

บทความนี้เป็นส่วนหนึ่งของซีรีส์ Angular + PrimeNG 19 (CSR, non-standalone) เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD. — ตอนที่ 8/10

Angular เดิมทีจะไม่มีไฟล์ environment มาให้ ต้องสร้างด้วยตัวเอง โดยปกติมักแบ่งออกเป็น 2 ไฟล์ คือ environment.ts สำหรับใช้ dev และ environment.prod.ts สำหรับใช้บน production โดยวิธีทำก็สามารถสร้าง folder environments ถายใต้ folder src ได้เลย

ภายในไฟล์ให้กำหนด export const environment เพื่อให้สามารถเรียกใช้ที่ไฟล์อื่นได้

export const environment = {
// Create a variable Here
};

วิธีเรียกใช้ให้ import แล้ว assign ตัวแปรเข้า local variable ก็จะสามารถเรียกใช้ได้เลย

import { environment } from '../../../environments/environment';
export class FormPageComponent {
env = environment   // เวลาเรียกใช้ก็ this.env.<ตัวแปรในไฟล์ environment> }

วิธีตั้งค่าให้ Angular สลับไฟล์ environment อัตโนมัตื เวลา build เป็น production ให้ไปใช้ไฟล์ environment.prod แทน

แก้ไขไฟล์ angular.json

ในส่วน configurations -> production ให้เพิ่ม fileReplacements เข้าไป

"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
Wutthiphon Tassana
Wutthiphon Tassana