從 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
相關連結