The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何在 Angular 16 加入 environments.ts 環境變數支援

從 Angular 15 開始,預設透過 ng new 建立的專案都不會有之前的 environment.ts 環境變數檔與相關設定,由於看到有人問到這個問題,而且我發現官方文件都沒有相關說明,因此我特別撰文說明如何把這個設定加回去。

設定過程

  1. 建立 Angular 16 全新專案

    ng new demo1 --routing --style css
    
  2. 使用 Visual Studio Code 開啟專案

    code demo1
    
  3. 建立兩個環境變數檔

    第一個 src/environments/environment.ts 檔案,內容如下:

    export const environment = {
      production: false
    };
    

    第二個 src/environments/environment.prod.ts 檔案,內容如下:

    export const environment = {
      production: true
    };
    
  4. 調整 angular.json 設定檔

    找到 .projects.demo1.architect.build.configuration.production 區段,加入以下設定值:

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

測試成果

  1. 修改 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';
    }
    
  2. 啟動開發伺服器在 production 模式

    ng serve --configuration=production
    

    當啟動在 production 模式時,我們在 angular.json 設定檔中的 fileReplacements 設定就會生效,並且在建置過程中自動將 src/environments/environment.ts 替換成 src/environments/environment.prod.ts 檔案!

  3. 開啟 http://localhost:4200 就會看到以下 Production app is running! 字樣

    image

Angular CLI 懶人包

其實從 Angular CLI 15.1 開始,就有一個內建的 ng generate environments 命令可以幫你快速產生 environment.ts 與調整 angular.json 相關設定,可謂是懶人的救星!👍

ng generate environments

相關的官網文件在此:Configure environment-specific defaults

相關連結

留言評論