typescript - 我可以在建置時向 angular-cli 傳遞參數嗎

我想在構建 Angular2（TypeScript）應用程式時，向 angular-cli 傳遞自訂參數。這可能嗎？我該如何在我的程式碼中存取這些參數？

場景是這樣的：我有一個 Angular2 應用程式，擁有 2 種佈局。每種佈局有 3 種顏色（紅色、藍色、綠色）。我想要建立所有可能的組合。每個應用程式對應一種佈局和顏色 => layout1red、layout1green、layout2blue、...

我想為每個構建創建 6 個 JSON 配置文件，在其中定義佈局和顏色，可能還有一些其他屬性。

答案＃1

可以使用 @angular/cli 創建多個配置文件。

如文檔中所提，自訂配置文件可以以以下方式添加：

建立一個 src/environments/environment.NAME.ts
將 { "NAME": 'src/environments/environment.NAME.ts' } 添加到 .angular-cli.json 中的 apps[0].environments 對象
通過在 build/serve 命令中使用 --env=NAME 參數來使用它們。

所以，你可能需要 6 個開發用的配置文件和 6 個生產用的配置文件。

然後要訪問那些變數，只需從 environment.ts 文件導入 environment 對象。

答案＃2

我沒有完全明白你的問題，我能想到兩種方法可以實現這個：

A- 在生成新專案時傳遞參數：

1- 為了能夠向 Angular CLI 傳遞參數，你需要了解你希望它被用在哪裡。

如果在您的佈局中使用那些配置，您可以分叉 Angular CLI 並更新它的藍圖，然後輕鬆地添加您自己的配置。

這是組件藍圖：

     angular-cli/packages/@angular/cli/blueprints/component/files/__path__/__name__.component.ts

看起來像這樣：

@Component({
  selector: '<%= selector %>',<% if(inlineTemplate) { %>
  template: `

你看到 selector 嗎？那是你可以操作的組件的名稱，最後在創建新專案時，你可以在那裡傳入自己的標誌並使用它。

但這不是最好的主意，因為每當 Angular CLI 更新時，你總是會遇到麻煩。

2- 另一個可能的解決方案是使用 ng eject

這將在單獨的檔案中生成 webpack 配置，並將其放在你的專案根目錄中，然後你可以操作該檔案，提供你的配置，並根據你的應用程式進行自訂。

但話說回來，我不確定你想如何使用那個配置。

這是您 建置時間 配置的完美候選項。

3- 使用 environments 配置：

如同已經有人回答過的，這對於提供 build time 配置也非常方便：

按照 @mikedanylov 的回答，然後在你的檔案中這樣使用它：

import { environment } from './environments/environment';

if(environment.colorRed==='blue'){

     console.log('the color is blue');

}


 npm build -e=colorRed

B: 執行時間 :

這是一個更好的選擇，你可以在你的 index.html 中像這樣創建一個調用：

  <script src="wherever/configurations/blue"></script>

然後在配置中，你可能會有：

  var configuration = {
      whatEver:"blue"
  }

而且因為這是一個腳本，它將可以在任何地方使用，你可以在你的組件中訪問它：

export class MyComponent{


    ngOnInit(){
        console.log('colour is : '+window['configuration.whatEver']); // obviously you can improve this and create type definitions and what not.
    }
}

這將使你在將來更新配置時有更大的靈活性，而無需重新構建你的應用程式。

顯然，你可以通過 Ajax 調用來進行相同的調用，但我覺得上面的方法對應用程式的依賴性較小。