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);
    }
}