ng-zorro-antd踩坑

angular项目集成antd中出现的问题

antd的angular版本为 ng-zorro-antd

官方的文档为https://ng.ant.design/version/0.7.x/docs/getting-started/zh

在此只简单的介绍一下自己在集成过程中的心得

组件引用

因为项目最初是使用的别的框架，antd的官方文档上面是直接进行的全局设置，由于担心会影响到其它的组件，我就没有采用全局的方式，没想到这是在为自己留坑

我之前的做法是在组件的module中只引入自己需要的antd组件，例如

import { NzTableModule, NzInputModule, NzFormModule, NzPopconfirmModule,NzModalModule, NzButtonModule, NzGridModule } from "ng-zorro-antd";


@NgModule({
  imports: [
    CommonModule,
    NzTableModule,
    NzInputModule,
    NzFormModule,
    FormsModule,
    NzPopconfirmModule,
    NzModalModule,
    ModalModule,
    NzButtonModule,
    NzGridModule,
    ReactiveFormsModule
    ReactiveFormsModule,
    NgZorroAntdModule
  ]
})

这种做法在本地开发的时候，一直是可以正常工作的。但是在进行编译的时候，因为采用了

ng build --prod

而 -prod参数是默认开始AOT的。AOT是Ahead of Time的缩写，在build的时候就会把所有文件都编译完成，这样在浏览器获取到资源文件的时候，能够直接进行渲染出来。与之对应的另外一种编译方式是JIT(Jsut in Time)，这种是浏览器进行实时编译的。相对而言，通过AOT方式构建的项目，在访问的时候明显会比JIT快得多，因为无需浏览器进行编译

而我在本地开发的时候，是直接通过ng serve的模式进行npm start的，没有添加prod参数，也就是说是通过JIT的方式。虽然会慢一点，但是能直接运行，因此也就没注意一个隐藏的坑。

到了准备发布的时候，需要进行build。而线上的build是需要使用 - -prod参数的。因此build就会一直报一个错误

ERROR in : Unexpected value 'NzTabsModule in /Users/hengxingyang/Documents/vdian/gitlab/zebra/zebra-ui/node_modules/ng-zorro-antd/antd.d.ts' imported by the module 'AppConfigManageModule in /Users/hengxingyang/Documents/vdian/gitlab/zebra/zebra-ui/src/app/index/app-menu/app-config-manage/app-config-manage.module.ts'. Please add a @NgModule annotation.

在网上google了整整一天，都没有查出来个所以然，有的说是版本不一样，有的说是引用方式不一样，基本能够查到的方法都试了一遍，还是没有任何作用

通过仔细寻找原因，我发现如果build的时候设置 —aot=false的话，是可以成功的，也就是说我当前的代码是不支持aot的。通过仔细查看antd的文档，发现了一句话

为什么不提供模块单独引入#

事实上，从 ng-zorro-antd 的第一个版本开始，所有的 ng-zorro-antd 代码就完全由 TypeScript 编写，打包时会根据代码中使用的模块 Tree Shaking，未使用的模块并不会打包进生成的应用中，因此单模块引入是完全没有任何必要的。

才搞明白，ng-zorro-antd是不支持单模块引入的，也就是说根本不用单独对每个模块进行引入，而是在有需要的地方，直接引入 NgZorroAntdModule就行了，这样反而更加的方便。而且在打包的时候，也是进行按需打包的，并不是会把所有内容都打包进去。

在将module修改成以下内容后，终于可以成功运行

import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ModalModule,
    ReactiveFormsModule,
    NgZorroAntdModule
  ]

哎，还是要按照文档一步步的来，不然都是坑