Angular開發經驗總結

1. 安裝@angular-devkit/core，用命令生成組件和服務：

ng g c componentName(默認建立子目錄和組件)
ng g s serviceName（當前目錄下建立服務）
ng g m moduleName（建立子目錄和路由）

注意，若是你建立了兩個Module，好比routing module，上述命令會提示：

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.

這時候，要指定目標module，自動將dealer.component.ts加入到app.module.ts的declare節點內。好比：

ng g c componentName --module app  標記主module 爲app.module.ts，並自動追加組件到module中

其它組件建立命令：

Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module
Route	ng g route my-route           //當前已禁用

2. 當發生不存在的.angular-cli.json時，直接建立：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "mars-werb"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

3. 下載完成代碼運行（npm 根據package.json安裝依賴庫）：

npm install

4. 若是基於ant.design開發，須要安裝：

npm install ng-zorro-antd --save

5. 增長.gitignore文件，保證過濾掉依賴包

.idea
.idea/*.xml
node_modules

6. Intellij idea的Terminal是用來作什麼的？當發現沒有安裝 @angular-devkit/core，能夠直接經過Terminal完成，目標直接定位到當前項目目錄，很是方便。

7. 當編輯代碼過程當中出現for語句解析錯誤提示，直接修改：tslint.json的forin選項：

statements must be filtered with an if statement

tslint.json: true to false

...
"forin": false                        //不檢驗forin語句中變量合法性
"no-trailing-whitespace": false,      //不檢查縮進空格
"max-line-length": [false,140],       //行字符不越界檢查
"prefer-const": ["error", {
        "destructuring": "any",
        "ignoreReadBeforeAssign": false
    }]                                //忽略is never reassigned. use 'const' instead檢查
...

8. 應用系統少不了Cookie的應用，比較不錯的Cookie service，基於ng2-cookies，應用比較普遍，兼容性好：

npm install ngx-cookie-service --save

9. 提示 [formGroup]不是form的屬性錯誤的時候，要在app.module.ts中import ReactiveFormsModule。

10. Angular 5在使用HTTP服務的時候，最好使用HttpClient，給個粟子：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Center} from '../model/center.model';

const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable()
export class MarsService {
    constructor(private httpClient: HttpClient) {}

    centers() {
        return this.httpClient.get<Center[]>('./assets/data/center.json', httpOptions);
    }
}