angular/cli@8.2.0整合ng-zorro-antd@8.1.2创建项目

一、项目目录结构

二、安装 angular/cli@8.2.0

npm install -g @angular/cli@8.2.0

三、使用 angular/cli@8.2.0 创建项目

项目创建指令：ng new angular-demo --routing

四、安装 ng-zorro-antd@8.1.2

npm install ng-zorro-antd@8.1.2

五、安装 hammerjs@2.0.8 依赖

npm install hammerjs@2.0.8

六、配置

（01）项目根目录下创建 proxy.conf.json 代理配置文件

{
  "/angular-demo": {
    "target": "http://127.0.0.1:8080",
    "secure": false
  },
  "**": {
    "target": "http://127.0.0.1:8080",
    "pathRewrite": {"^/assets": ""},
    "secure": false
  }
}

（02）项目 environments 目录下创建 environment.release.ts 环境配置文件

export const environment = {
  production: true,
  ssoProxy: 'http://127.0.0.1:8080/angular-demo',
};

（03）修改 environment.ts 配置文件

export const environment = {
  production: false,
  ssoProxy: 'angular-demo',
};

（04）修改 environment.prod.ts 配置文件

export const environment = {
  production: true,
  ssoProxy: 'http://127.0.0.1:8080/angular-demo',
};

（05）修改 app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

（06）修改 app.component.html 去除多余内容

<router-outlet></router-outlet>

（07）在 app 目录下创建 share 通用模块

ng generate module share

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AntDesignModule } from './ant-design/ant-design.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpClientModule,
    AntDesignModule
  ],
  exports: [
    FormsModule,
    HttpClientModule,
    AntDesignModule
  ],
  declarations: [],
  providers: []
})
export class ShareModule { }

（08）在 share 模块下创建 ant-design 模块

ng generate module ant-design

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgZorroAntdModule, NZ_I18N, zh_CN, NZ_ICONS } from 'ng-zorro-antd';

import { IconDefinition } from '@ant-design/icons-angular';
import * as AllIcons from '@ant-design/icons-angular/icons';

const antDesignIcons = AllIcons as {
  [key: string]: IconDefinition;
};
const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key]);

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';

registerLocaleData(zh);

@NgModule({
  imports: [
    CommonModule,
    NgZorroAntdModule
  ],
  exports: [
    NgZorroAntdModule
  ],
  declarations: [],
  providers: [
    { provide: NZ_I18N, useValue: zh_CN },
    { provide: NZ_ICONS, useValue: icons }
  ]
})
export class AntDesignModule { }

（09）修改 styles.css 文件

/* You can add global styles to this file, and also import other style files */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

（10）在 src 目录下创建 theme.less 样式文件

// -------- 引入官方提供的 less 样式入口文件 -----------
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

// -------- 自定义参数覆盖 -----------
@primary-color: #0099FF;

（11）修改 angular.json 文件如下：引入 ng-zorro-antd 样式文件，引入环境配置文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-demo": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/styles.css",
              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
              "src/theme.less"
            ],
            "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "release": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.release.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-demo:build:production"
            },
            "release": {
              "browserTarget": "angular-demo:build:release"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular-demo:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "angular-demo"
}

（12）修改 package.json 文件中的启动配置

"start": "ng serve --proxy-config=proxy.conf.json --host 127.0.0.1 --port 4200 --open"

（13）创建 index 和 error 模块及组件

ng generate module index --routing
ng generate component index
ng generate module error --routing
ng generate component error

（14）修改 app-routing.module.ts 文件

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full',
  },
  {
    path: 'index',
    loadChildren: './index/index.module#IndexModule'
  },
  {
    path: '**',
    loadChildren: './error/error.module#ErrorModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

（15）index 模块文件内容

/*
 * index.module.ts
 */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { IndexRoutingModule } from './index-routing.module';
import { IndexComponent } from './index.component';
import { ShareModule } from '../share/share.module';

@NgModule({
  declarations: [IndexComponent],
  imports: [
    CommonModule,
    IndexRoutingModule,
    ShareModule
  ]
})
export class IndexModule { }

/*
 * index-routing.module.ts
 */
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index.component';

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class IndexRoutingModule { }

/*
 * index.component.html
 */
<div style="width: 100%; height: 100%; padding: 10px 10px 10px 10px;">
  <nz-card style="width: 100%; height: 100%;" [nzTitle]="title" [nzExtra]="extraTemplate">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </nz-card>
  <ng-template #extraTemplate>
    <a (click)="doMore()">更多</a>
  </ng-template>
</div>

/*
 * index.component.css
 */
p {
  margin: 0;
}

/*
 * index.component.ts
 */
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { environment } from '../../environments/environment';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {

  title: String = '首页';

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
  }

  doMore() {
    this.http.get(environment.ssoProxy + '/welcome').subscribe(res => {
      console.log(res);
    });
  }

}

（16）error 模块文件内容

/*
 * error.module.ts
 */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ErrorRoutingModule } from './error-routing.module';
import { ErrorComponent } from './error.component';
import { ShareModule } from '../share/share.module';

@NgModule({
  declarations: [ErrorComponent],
  imports: [
    CommonModule,
    ErrorRoutingModule,
    ShareModule
  ]
})
export class ErrorModule { }

/*
 * error-routing.module.ts
 */
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ErrorComponent } from './error.component';

const routes: Routes = [
  {
    path: '',
    component: ErrorComponent,
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ErrorRoutingModule { }

/*
 * error.component.html
 */
<div style="width: 100%; height: 100%; padding: 10px 10px 10px 10px;">
  <nz-carousel [nzAutoPlay]="true">
    <div nz-carousel-content *ngFor="let index of array">
      <h3>{{ index }}</h3>
    </div>
  </nz-carousel>
</div>

/*
 * error.component.css
 */
[nz-carousel-content] {
  text-align: center;
  height: 400px;
  line-height: 400px;
  background: #364d79;
  color: #fff;
  overflow: hidden;
}

h3 {
  color: #fff;
}

/*
 * error.component.ts
 */
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.css']
})
export class ErrorComponent implements OnInit {

  array = [1, 2, 3, 4];

  constructor() { }

  ngOnInit() {
  }

}

七、运行结果截图

首页截图：

错误截图：

八、修复警告信息

指令：npm audit

转载于:https://my.oschina.net/wutenghui/blog/3027899