在Angular项目中引入NG-ZORRO

1.前置

首先创建一个angular项目：angular创建一个新项目的步骤
这是我项目的结构：

2.安装NG-ZORRO并进行初始化配置

安装NG-ZORRO：cd 到当前项目位置，使用命令

ng add ng-zorro-antd

进行安装，接着会有一些初始化问题，根据自己需要进行选择，我是这样设置的：
设置完后，会提示成功。

3.引入样式

我引入的是全部组件样式，在 angular.json 中引入了

"styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]

项目里：

在 style.css 中引入ng-zorro-antd.min.css，官网是说

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

但是在运行时，会报解析不到ng-zorro-antd.min.css的错误，根据错误提示，是在项目的src目录下找的这个文件，但是实际上这个文件下到了node_modules里，所以我改成了下面的：

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.min.css";

4.引入组件

以按钮组件NzButtonModule为例：在app.module.ts中引入NzButtonModule

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

之后在模板中使用：

<button nz-button nzType="primary">Primarybutton>

运行可以在浏览器上看到一个按钮：