最近新建angular项目在添加ng-zorro-antd组件时9.0.0版本以上,会出现无法添加ng-zorro-antd组件,一添加ng add ng-zorro-antd就会报如下错误:
Error: [ng-zorro-antd@^0.0.0-NOT-USED] Can't find package ng-zorro-antd@^0.0
后来改成npm install ng-zorro-antd --save也会报错:
npm ERR! code ETARGET npm ERR! notarget No matching version found for ng-zorro-antd@^0.0.0-NOT-USED
经过多次尝试,发现本地全局angular/cli是8.1.3版本,而ng-zorro-antd是9.3.0版本,两个版本之间应该是有一定的冲突,所以导致ng-zorro-antd无法添加成功。后来卸载angular/cli重新安装angular/cli最新版本,成功添加ng-zorro-antd。(在重新安装的过程你可能继续出现无法添加ng-zorro-antd的情况,别问我为什么,因为我经历了它。出现这种情况,建议卸载nodejs,彻底删除 C:\Users\lenovo\AppData\Roaming路径下的,npm,和npm-cache文件夹,这里是可以删除的,如果无法删除就自己一个一个的把里面的删掉,在删外面。然后重现安装nodejs和angular/cli。如果出现上述情况,不要嫌麻烦,因为你可能研究到最后,发现自己走的还是这条路,哈哈)
添加ng-zorro-antd成功后,你以为就完了吗?当然我希望你是正常的,如果你不正常,出现下面的问题,请继续…
添加ng-zorro-antd成功后,部分同学可能会发现ng-zorro-antd的组件样式并不能起到作用。出现以下无样式情况。
这是因为你并没有把ng-zorro-antd样式引入,出现这种情况只需要将下面的代码引入到项目根目录下的styles.less中就可以了(根据创建时选的css类型,你的可能是styles.css、styles.sass等)
注意:记得重启项目!
@import "~ng-zorro-antd/ng-zorro-antd.less";
到这一步你以为你成功了吗?我希望你成功,但是如果你出现无法使用ng-zorro-antd组件里的icon,嘿嘿请继续。
icon的相关报错如下:
ERROR Error: [@ant-design/icons-angular]: the icon reload-o does not exist or is not registered
出现这种问题是因为,新版图标可能略有缺失(这不是略有呀,感觉明明好多)不要问我怎么知道的,官网有解释,截图为证:
解决方式,官网也有介绍,按照官网正常进行,即可。
即便有官网的介绍,但是对于像我这样的小白来说,解决起来可能还是费劲,为了方便更多的小白。我把相关操作步骤在详细的描述一下。
"assets": [
"src/favicon.ico",
"src/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",
"src/styles.less"
],
注意不要添加错位置了,下面还有一个assets,不在那个位置。
有些心急的小白,比如我添加完成后,就开始刷新网页,结果发现错误并没有消失,然后就开始质疑官网。哈哈…
其实不然,你虽然更改了angular.json文件,但是项目加载的还是之前的,这时需要关闭项目,然后重新打开,重新ng serve就ok了。