一、說明

有時候我們希望能在Angular應用程式執行時取得參數設定檔，再根據設定檔去做對應的動作。

目前在網路找到的參數設定檔的實作方式有下列兩種方式：

第一種：透過呼叫 API 從遠端的方式取得參數設定檔。

第二種：將參數設定在 TypeScript 檔案。

但以上兩種方式使用上會有限制，限制說明如下：

第一種：若參數是啟動必要參數(例如：切換Dev、Sit環境的API)，使用API方式取得參數設定檔就不適合了，因為Angular應用程式在使用API方式之前就需要必要參數。

第二種：參數定義在 TypeScript 檔案內，經過編譯後會被整併到 main.js 檔案內，所以調整參數需要在 main.js 調整，但編譯過的 main.js 內容非常雜亂不易調整，下圖是main.js內容。

經過以上的說明，最理想的方式應該是把參數定義在一個不會被編譯的檔案又容易修改，然後再去讀取參數。

目前最好的方案是將「參數」設定在index.html中的「meta標籤」中。

二、程式實作說明

a.在index.html中，新增「meta標籤」如下圖紅框處。

b.在app.component.html，新增如下程式碼。

c.在app.component.ts，新增如下程式碼。

三、Angular上線部署實戰

a.Angular編譯後的檔案清單如下。

b.再將Angular程式部署之前，先用記事本打開index.html修改env參數。

c.Angular程式上線取得參數效果如下圖。