Angular5安装ng-zorro-antd

1. 安装脚手架工具#

使用 @angular/cli 前，务必确认 Node.js 已经升级到 v8.10 或以上，强烈建议升级至最新版本的 @angular/cli。

$ npm install -g @angular/cli@latest

请注意： 由于 0.7.0 版本的 ng-zorro-antd 目前尚未正式支持 angular 6.0 版本，@angular/cli 请选择 1.7.4 版本安装。

更多功能请参考 CLI 文档。

2. 创建一个项目#

在创建项目之前，请确保 @angular/cli 已被成功安装

$ ng new PROJECT-NAME

@angular/cli 会自动生成一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖

3. 安装组件#

现在项目下安装 ng-zorro-antd

$ cd PROJECT_NAME
$ npm install ng-zorro-antd@0.7.1 --save

4.引入模块#

直接用下面的代码替换 /src/app/app.module.ts 的内容

注意：在根 module 中需要使用 NgZorroAntdModule.forRoot()，在子 module 需要使用 NgZorroAntdModule

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';

/** 注册语言包 ** /
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot()
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这样就成功在全局引入了 ng-zorro-antd。

5. 引入样式#

修改 .angular-cli.json 文件的 styles 列表

...
  "styles": [
    "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
  ]
...

6. 使用第一个组件#

用下面的代码替换 /src/app/app.component.html

<button nz-button nzType="primary">Button</button>

7. 开发调试#

一键启动调试

$ ng serve --port 0 --open

此时就可以看到最简单的 Button效果

8. 构建和部署#

$ ng build --prod

入口文件会构建到 dist 目录中，你可以自由部署到不同环境中进行引用。

了解更多#

如果你想了解更多CLI工具链的功能和命令，建议访问 Angular CLI 了解更多

参考：https://ng.ant.design/version/0.7.x/docs/getting-started/zh