從 Angular 15 開始，預設透過 ng new 建立的專案都不會有之前的 environment.ts 環境變數檔與相關設定，由於看到有人問到這個問題，而且我發現官方文件都沒有相關說明，因此我特別撰文說明如何把這個設定加回去。
設定過程
-
建立 Angular 16 全新專案
ng new demo1 --routing --style css
-
使用 Visual Studio Code 開啟專案
code demo1
-
建立兩個環境變數檔
第一個 src/environments/environment.ts 檔案，內容如下：
export const environment = {
production: false
};
第二個 src/environments/environment.prod.ts 檔案，內容如下：
export const environment = {
production: true
};
-
調整 angular.json 設定檔
找到 .projects.demo1.architect.build.configuration.production 區段，加入以下設定值：
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
測試成果
-
修改 src\app\app.component.ts 程式
import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = environment.production ? 'Production' : 'Development';
}
-
啟動開發伺服器在 production 模式
ng serve --configuration=production
當啟動在 production 模式時，我們在 angular.json 設定檔中的 fileReplacements 設定就會生效，並且在建置過程中自動將 src/environments/environment.ts 替換成 src/environments/environment.prod.ts 檔案！
-
開啟 http://localhost:4200 就會看到以下 Production app is running! 字樣
Angular CLI 懶人包
其實從 Angular CLI 15.1 開始，就有一個內建的 ng generate environments 命令可以幫你快速產生 environment.ts 與調整 angular.json 相關設定，可謂是懶人的救星！👍
ng generate environments
相關的官網文件在此：Configure environment-specific defaults
相關連結