@angular/cli 环境搭建

1. 环境需要

node版本要求8.x及以上，typescript、python2的环境

2. ng new project后，npm install会遇到一个问题

node-sass会安装失败，解决方案如下（3选1即可）：

a. 可以使用cnpm进行install（速度相对快）；

b. 要不就把npm的registry改为淘宝镜像（npm config set "registry=https://registry.npm.taobao.org"）；

c. 或者在.npmrc中添加（sass_binary_site=https://npm.taobao.org/mirrors/node-sass/），将下载路径指向淘宝。

3. 如何添加hmr

3.1. add environment.hmr.ts

export const environment = {
    production: false,
    hmr: true
};

3.2 modify environment.prod.ts

export const environment = {
    production: true,
+   hmr: false
};

3.3 modify environmonent.ts

export const environment = {
    production: false,
+   hmr: false
    };

3.4 modify angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular6",
            "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.css"
            ],
            "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
            },
+           "hmr": {
+             "fileReplacements": [
+               {
+                 "replace": "src/environments/environment.ts",
+                 "with": "src/environments/environment.hmr.ts"
+               }
+             ]
+           }

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "angular6:build"
    },
    "configurations": {
        "production": {
            "browserTarget": "angular6:build:production"
        },
+      "hmr": {
+           "browserTarget": "angular6:build:hmr"
+       }
    }
    },

3.5 安装相关依赖

npm install --save-dev @angularclass/hmr
npm install --save-dev @types/webpack-env
npm install --save-dev typescript

3.6 add src/hmr.ts

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};

3.7 modify src/main.ts

import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+import { hmrBootstrap } from './hmr';
+
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
+console.log(environment)
+if (environment.hmr) {
+  if (module[ 'hot' ]) {
+    hmrBootstrap(module, bootstrap);
+  } else {
+    console.error('HMR is not enabled for webpack-dev-server!');
+    console.log('Are you using the --hmr flag for ng serve?');
+  }
+} else {
+  bootstrap();
+}

3.8 add src/typings.d.ts

///<reference types="webpack-env" />

3.9 运行npm run hmr

modify package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
-   "e2e": "ng e2e"
+   "e2e": "ng e2e",
+   "hmr": "ng serve --hmr --configuration hmr"
},

3.10 链接

GitHub - hyysb/angular6: angular6（angular网站）
官方github提供的方法，一直热更新会有问题，方案来源HMR Story Update for 6rc2 #10268