angular随笔 之angular添加ng-zorro-antd组件时相关问题

最近新建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的组件样式并不能起到作用。出现以下无样式情况。
angular随笔 之angular添加ng-zorro-antd组件时相关问题_第1张图片
这是因为你并没有把ng-zorro-antd样式引入,出现这种情况只需要将下面的代码引入到项目根目录下的styles.less中就可以了(根据创建时选的css类型,你的可能是styles.css、styles.sass等)

注意:记得重启项目!

@import "~ng-zorro-antd/ng-zorro-antd.less";

angular随笔 之angular添加ng-zorro-antd组件时相关问题_第2张图片

到这一步你以为你成功了吗?我希望你成功,但是如果你出现无法使用ng-zorro-antd组件里的icon,嘿嘿请继续。

icon的相关报错如下:

ERROR Error: [@ant-design/icons-angular]: the icon reload-o does not exist or is not registered

出现这种问题是因为,新版图标可能略有缺失(这不是略有呀,感觉明明好多)不要问我怎么知道的,官网有解释,截图为证:
angular随笔 之angular添加ng-zorro-antd组件时相关问题_第3张图片

解决方式,官网也有介绍,按照官网正常进行,即可。

Icon图标
angular随笔 之angular添加ng-zorro-antd组件时相关问题_第4张图片

即便有官网的介绍,但是对于像我这样的小白来说,解决起来可能还是费劲,为了方便更多的小白。我把相关操作步骤在详细的描述一下。

首先找到angular.json文件,在项目根目录
angular随笔 之angular添加ng-zorro-antd组件时相关问题_第5张图片

然后打开在指定位置添加以下代码
angular随笔 之angular添加ng-zorro-antd组件时相关问题_第6张图片

"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了。

你可能感兴趣的:(angular前端,ng-zorro组件库,angular2,阿里巴巴,less,css,前端)