使用NG-ZORRO文档新建项目,组件加载无效

周叔叔
  • 45

官网新建项目命令行:

npm install -g @angular/cli
ng new PROJECT-NAME
ng add ng-zorro-antd

项目启动后,首页出现了NG-ZORRO欢迎文字,但是我将首页改为:

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

这个按钮组件没有加载出来,只是显示了普通的按钮,请问应该怎么改啊?

命令行我就是用了上面三条,没使用其他插件,NG-ZORRO的主题也没有按需加载,使用的 ng-zorro-antd 是 11.2,angular 也是 11.2

回复
阅读 566
2 个回答
✓ 已被采纳

因为 zorro 的组件都是模块化引入的,这有利于树摇优化(项目没用到的组件最后不打包),所以你要用到哪些组件,就引入哪些模块。
比如在 app.module.ts 中:

import { NzButtonModule } from 'ng-zorro-antd/button';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NzButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样就能识别 zorro 的各类按钮组件了

谢谢,已经解决了,没想到还要按需加载。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏