自訂開發環境設置

1 篇文章 / 0 new
author
自訂開發環境設置
預設系統提供兩種編譯環境, 為 開發(dev), 產品(prod), 若想要增加不同情境下的環境參數則可一下步驟建立所需的環境參數
1. 新增環境參數檔, 建立在 src\environments目錄下, 我取名為 environment.lab.ts, 內容如下
export const environment = {
    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"
},

3. 增加 .angular-cli.json 設定
"environments": {
  "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>

這樣就可以知道現在所啟動的環境參數為哪一組了
Free Web Hosting