預設系統提供兩種編譯環境, 為 開發(dev), 產品(prod), 若想要增加不同情境下的環境參數則可一下步驟建立所需的環境參數
1. 新增環境參數檔, 建立在 src\environments目錄下, 我取名為 environment.lab.ts, 內容如下
2. 增加 package.json 設定
3. 增加 .angular-cli.json 設定
4. 執行指定的環境
5. 在頁面上顯示目前的環境,
這樣就可以知道現在所啟動的環境參數為哪一組了
1. 新增環境參數檔, 建立在 src\environments目錄下, 我取名為 environment.lab.ts, 內容如下
export const environment = {
production: false, //系統預設變數, 值false時 build 時 js, css 不進行壓縮處理
envName: 'lab', //其它自訂參數
};
production: false, //系統預設變數, 值false時 build 時 js, css 不進行壓縮處理
envName: 'lab', //其它自訂參數
};
2. 增加 package.json 設定
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.cfg.json",
"start-lab": "ng serve --environment=lab --proxy-config proxy.cfg.json",
"start-prod": "ng serve --environment=prod",
"build": "ng build --prod",
"build-stg": "ng build --environment=stg",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"ng": "ng",
"start": "ng serve --proxy-config proxy.cfg.json",
"start-lab": "ng serve --environment=lab --proxy-config proxy.cfg.json",
"start-prod": "ng serve --environment=prod",
"build": "ng build --prod",
"build-stg": "ng build --environment=stg",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
3. 增加 .angular-cli.json 設定
"environments": {
"dev": "environments/environment.ts",
"lab": "environments/environment.lab.ts",
"prod": "environments/environment.prod.ts"
}
"dev": "environments/environment.ts",
"lab": "environments/environment.lab.ts",
"prod": "environments/environment.prod.ts"
}
4. 執行指定的環境
npm run start-lab
5. 在頁面上顯示目前的環境,
a. import { environment } from '../environments/environment'; 固定為 environment 不須含 environment.xxx
b. 指定類別變數 environmentName = environment.envName;//取得自訂行稱
c. 頁面加入 <p>{{ environmentName }}</p>
b. 指定類別變數 environmentName = environment.envName;//取得自訂行稱
c. 頁面加入 <p>{{ environmentName }}</p>
這樣就可以知道現在所啟動的環境參數為哪一組了
