[Angular] 於Angular 加入build profile 設定

在Visual Studio中, 可以透過修改project 檔案加入不同的profile. 而在Angular 中, 亦有相同的設定. 透過利用Angular CLI (Command-Line Interface) 建立的專案, 則可直接修改angluar.json 進行設定. 方法如下.

前置設定

1. 確定電腦已經安裝node.js.
   若沒有安裝, 則可到其官方網頁下載最新版本及安裝.
   下載網址: https://nodejs.org/en/
2. 安裝Angular CLI.
   若沒有安裝, 則可在安裝node.js 後利用command prompt 輸入以下指令.

   npm install -g @angular/cli

   -g 是指global install.

Profile 設定

1. 建立專案.
   利用command prompt, 輸入以下指令.

   npm new <<project name>>

2. 建立profile 檔.
   於%PROJECT_HOME%/environments/ 中分別建立environment.dev.ts 及environment.test.ts, 並輸入以下內容.

   export const environment = {
       production: false,
   };

3. 進行設定.
   開啟%PROJECT_HOME%/angular.json, 修改以下內容.

   {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
     "newProjectRoot": "projects",
     "projects": {
       "matilda-app-frontend": {
         "root": "",
         "sourceRoot": "src",
         "projectType": "application",
         "prefix": "app",
         "schematics": {
           "@schematics/angular:component": {
             "styleext": "scss"
           }
         },
         "architect": {
           "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
               "outputPath": "dist/matilda-app-frontend",
               "index": "src/index.html",
               "main": "src/main.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "src/tsconfig.app.json",
               "assets": [
                 "src/favicon.ico",
                 "src/assets"
               ],
               "styles": [
                 "src/styles.scss"
               ],
               "scripts": [
               ]
             },
             "configurations": {
               "production": {
                 "fileReplacements": [
                   {
                     "replace": "src/environments/environment.ts",
                     "with": "src/environments/environment.prod.ts"
                   }
                 ],
                 "optimization": true,
                 "outputHashing": "all",
                 "sourceMap": false,
                 "extractCss": true,
                 "namedChunks": false,
                 "aot": true,
                 "extractLicenses": true,
                 "vendorChunk": false,
                 "buildOptimizer": true
               },
               "development": {
                 "fileReplacements": [
                   {
                     "replace": "src/environments/environment.ts",
                     "with": "src/environments/environment.dev.ts"
                   }
                 ],
                 "optimization": false,
                 "outputHashing": "all",
                 "sourceMap": true,
                 "extractCss": true,
                 "namedChunks": true,
                 "aot": false,
                 "extractLicenses": false,
                 "vendorChunk": true,
                 "buildOptimizer": false
               },
               "test": {
                 "fileReplacements": [
                   {
                     "replace": "src/environments/environment.ts",
                     "with": "src/environments/environment.test.ts"
                   }
                 ],
                 "optimization": true,
                 "outputHashing": "all",
                 "sourceMap": false,
                 "extractCss": true,
                 "namedChunks": false,
                 "aot": true,
                 "extractLicenses": true,
                 "vendorChunk": false,
                 "buildOptimizer": true
               }
             }
           },
           "serve": {
             "builder": "@angular-devkit/build-angular:dev-server",
             "options": {
               "browserTarget": "matilda-app-frontend:build"
             },
             "configurations": {
               "production": {
                 "browserTarget": "matilda-app-frontend:build:production"
               },
               "development": {
                 "browserTarget": "matilda-app-frontend:build:development"
               },
               "test": {
                 "browserTarget": "matilda-app-frontend:build:test"
               }
             }
           },
           "extract-i18n": {
             "builder": "@angular-devkit/build-angular:extract-i18n",
             "options": {
               "browserTarget": "matilda-app-frontend:build"
             }
           },
           "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
               "main": "src/test.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "src/tsconfig.spec.json",
               "karmaConfig": "src/karma.conf.js",
               "styles": [
                 {
                   "input": "node_modules/@progress/kendo-theme-default/scss/all.scss"
                 },
                 "src/styles.scss"
               ],
               "scripts": [],
               "assets": [
                 "src/favicon.ico",
                 "src/assets"
               ]
             }
           },
           "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
               "tsConfig": [
                 "src/tsconfig.app.json",
                 "src/tsconfig.spec.json"
               ],
               "exclude": [
                 "**/node_modules/**"
               ]
             }
           }
         }
       },
       "matilda-app-frontend-e2e": {
         "root": "e2e/",
         "projectType": "application",
         "architect": {
           "e2e": {
             "builder": "@angular-devkit/build-angular:protractor",
             "options": {
               "protractorConfig": "e2e/protractor.conf.js",
               "devServerTarget": "matilda-app-frontend:serve"
             },
             "configurations": {
               "production": {
                 "devServerTarget": "matilda-app-frontend:serve:production"
               },
               "development": {
                 "devServerTarget": "matilda-app-frontend:serve:development"
               },
               "test": {
                 "devServerTarget": "matilda-app-frontend:serve:test"
               }
             }
           },
           "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
               "tsConfig": "e2e/tsconfig.e2e.json",
               "exclude": [
                 "**/node_modules/**"
               ]
             }
           }
         }
       }
     },
     "defaultProject": "matilda-app-frontend"
   }

   在configuration tag中, 會設定不同profile 的build option, 而且會將不同profile 設定轉換至environement.ts 中. 所以以後environment.ts 則不用修改.

4. 進行測試.
   於command prompt 中輸入以下指令, 於Node.js 上運行project.

   npm serve <<project name>> --configuration [development|test|production] --watch

   其中parameter watch 是監察檔案是否有修改. 若有的話, 會立即再compile TypeScript 再更新網頁. 在debug 時相當有用. 若見到Compile Successfully, 即一切順利.