1.基本介绍

Ant Design 主要用于开发和服务于企业级后台产品。如果你想开发移动端应用（web 页面 /app） Ionic 是不错的选择。

Ant Design 官网：https://ng.ant.design

2.使用1：直接在项目里面集成antd

安装：

ng add ng-zorro-antd

注意：默认使用yarn安装，所以电脑需要预装一下yarn（最好是最新版的），如果没有yarn就会使用npm，npm的失败概率比较高！

使用：先在模块里面引入并配置

import { NzButtonModule } from 'ng-zorro-antd/button';

注意：新引入模块之后需要重新运行一下项目

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

3.使用2：手动自行安装配置antd

npm下载包：

npm install ng-zorro-antd --save 
或者：
cnpm install ng-zorro-antd --save

在angular.json中引入样式：

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

在style.css中引入预构建样式文件

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

在模块里面引入并配置

import { NzButtonModule } from 'ng-zorro-antd/button';

使用：

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

4.报错：Missing locale data for the locale "zh-cn".

这错误通常表示 Angular 在使用 i18n（国际化）时缺少特定语言区域的本地化数据。在你的情况下，错误指明缺少 "zh-cn" 语言区域的本地化数据。

要解决这个问题，你需要确保你的 Angular 应用正确配置了国际化（i18n）并导入了相应的本地化数据。

5.报错：@slideMotion，"BrowserAnimationsModule" or "NoopAnimationsModule"

完整：Found the synthetic property @slideMotion. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

这错误表明你的Angular应用中使用了一个名为 @slideMotion 的合成属性，但你没有导入相应的 Angular 动画模块 BrowserAnimationsModule 或者 NoopAnimationsModule。

Angular的动画模块用于处理动画效果，例如渐变、滑动等。在你的应用中，如果你使用了自定义动画或第三方库提供的动画，并在组件或模块中使用了 @slideMotion 属性，你需要导入动画模块以确保这些动画能够正常工作。

解决这个问题的方法是导入动画模块。你可以根据你的需求选择导入 BrowserAnimationsModule 或者 NoopAnimationsModule。

1. 导入 BrowserAnimationsModule（适用于有动画需求的情况）：

   在你的根模块（通常是 AppModule）中导入 BrowserAnimationsModule：

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [
       // ... other imports
       BrowserAnimationsModule, // Import the BrowserAnimationsModule
     ],
     // ... other module configuration
   })
   export class AppModule { }

2. 导入 NoopAnimationsModule（如果不需要动画）：

   如果你不需要动画，可以导入 NoopAnimationsModule，它不会应用任何动画效果。

   import { NoopAnimationsModule } from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [
       // ... other imports
       NoopAnimationsModule, // Import the NoopAnimationsModule
     ],
     // ... other module configuration
   })
   export class AppModule { }

选择适合你需求的动画模块并导入它，这样就可以解决 @slideMotion 的合成属性错误。

6.报错：icons需要HttpClientModule

完整版：[@ant-design/icons-angular]: you need to import "HttpClientModule" to use dynamic importing..

这错误指示在使用 @ant-design/icons-angular 库时需要导入 HttpClientModule 模块，以便允许动态导入图标。

@ant-design/icons-angular 是 Ant Design Angular 图标库，它允许你在 Angular 应用中使用 Ant Design 的图标。动态导入图标可能需要使用 Angular 的 HttpClientModule 来加载图标资源。

要解决这个问题，你需要确保在你的 Angular 应用中导入了 HttpClientModule 模块。

在你的模块（通常是 AppModule）中导入并添加 HttpClientModule 到 imports 数组：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ... other imports
    HttpClientModule,  // Import the HttpClientModule
  ],
  // ... other module configuration
})
export class AppModule { }

确保你正确导入了 HttpClientModule，并将其添加到你的模块中，以允许在你的应用中使用动态导入 Ant Design 图标。

7.报错：icon is not registered

完整版：Uncaught Error: [@ant-design/icons-angular]:the icon plus-circle-o does not exist or is not registered.

注意：antd的icon在angular中使用需要引入声明才可以，不仅仅是引入了模块

引入方式分为静态引入和动态引入，我们常用静态引入

参考官网：

静态引入：

//下面是关于icon静态引入的配置（参考官网）
import { IconDefinition } from "@ant-design/icons-angular";
import { NzIconModule } from "ng-zorro-antd/icon";
// 引入你需要的图标，比如你需要 fill 主题的 AccountBook Alert 和 outline 主题的 Alert，推荐 ✔️
import { PlusCircleOutline } from "@ant-design/icons-angular/icons";
const icons: IconDefinition[] = [PlusCircleOutline];

NzIconModule.forRoot(icons), //使用icon图标

注意：这个时候还是会有报错的，我们导入ant-design包

"@ant-design/icons-angular": "^12.0.3",

8.最好的安装方法：踩坑之后的版本

最好使用手动自行安装配置antd的方式（最好使用cnpm）

例如：

cnpm install ng-zorro-antd@12.1.1 --save

并且注意antd与angular版本有对应关系

过高的angular版本是不被antd所支持的

一般来说如下方案是可行的：

npm安装和卸载大概率都会报错：

使用ng add命令安装也会报错（原因不明），所以都是不可行的

唯一可行的就是手动安装，或者把依赖写在package.json里面然后，cnpm i安装！

然后在angular.json中引入样式：

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

在style.css中引入预构建样式文件（scss文件也是一样引入即可，因为scss是兼容css的）

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

在模块里面引入并配置

import { NzButtonModule } from 'ng-zorro-antd/button';

使用：

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