本篇文章给大家介绍一下angular中引用ng zorro antd的三种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
【相关教程推荐：《angular教程》】
在angular7中使用新的ng zorro，按照官方文档一步一步来，没有报错，但是也没有反应。
试了一下官方的两种方式，第一种方式如果使用cnpm会报错，第二种方式会没有反应，也是因为使用了cnpm安装的缘故。
官方的第一种方式：
1. 安装脚手架工具`npm install -g @angular/cli`2. 创建一个项目`ng new PROJECT-NAME`3. 初始化配置`ng add ng-zorro-antd`4. 开发调试`ng serve --port 0 --open`5. 构建和部署`ng build --prod`
登录后复制
官方的第二种方式：
1. 安装组件`npm install ng-zorro-antd --save`2. 引入模块import { HttpClientModule } from '@angular/common/http';imports: [ BrowserModule, NgZorroAntdModule ],3. 引入样式与 SVG 资源 angular.json{ "assets": [ ... { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ], "styles": [ ... "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ]}
登录后复制
正确引入姿势1
如果按照官网的第一个步骤来的话，必须使用npm一次到位，不能中途使用cnpm,否则会报错。
上述错误出现的原因是因为我的安装步骤如下：
ng new demo02 –skip-installcd demo02cnpm installng add ng-zorro-antd // 到这一步报错ng serve –port 0 –open
上述错误的原因是因为第一步终止掉了，使用了cnpm安装了依赖。如果直接使用ng new demo02安装，继续后面的步骤就会没有问题，所以说第一种方式严格按照官方的来就可以，只不过有时候直接使用npm安装会报错，多试试几下，也许是网的问题。
正确引入姿势2
还是按照上面的步骤，值得注意的一点是使用npm安装，切记不能使用cnpm，这样安装完成之后，只用官网的第二个步骤就可以正确引入并使用。
ng new projectNamecd projectNamenpm install ng-zorro-antd –save导入模块：app.module.ts
import { NgZorroAntdModule } from 'ng-zorro-antd';imports: [ BrowserModule, NgZorroAntdModule],
登录后复制引入样式与 SVG 资源 angular.json
{ "assets": [ ... { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ], "styles": [ ... "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" // "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css" ]}
登录后复制
正确引入姿势3
这种方式可以使用npm或者使用cnpm,两种方式都是可以完成正确引入的。
1、安装ng zorro组件
npm install ng-zorro-antd --save
登录后复制
2、导入模块
app.module.ts
import { NgZorroAntdModule } from 'ng-zorro-antd';imports: [ BrowserModule, NgZorroAntdModule ],
登录后复制
3、引入样式
styles.css
@import "~ng-zorro-antd/src/ng-zorro-antd.css";
登录后复制
更多编程相关知识，请访问：编程入门！！
以上就是angular7中如何引用ng zorro antd？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2712731.html
