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的组件样式并不能起到作用。出现以下无样式情况。

这是因为你并没有把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

出现这种问题是因为，新版图标可能略有缺失（这不是略有呀，感觉明明好多）不要问我怎么知道的，官网有解释，截图为证：

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

Icon图标

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

首先找到angular.json文件，在项目根目录

然后打开在指定位置添加以下代码

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

**

更新于2021.1.25

**
angular版本：11.1.0
ng-zorro版本：11.0.2
添加ng-zorro

ng add ng-zorro-antd

项目编译失败，是因为@angular-devkit/build-angular最新版本有问题，将其退一个版本改成
“@angular-devkit/build-angular”: “~0.1100.0”，然后删除node_modules文件夹重新npm install即可
@angular-devkit/build-angular在package.json文件中编译

参考：https://github.com/NG-ZORRO/ng-zorro-antd/issues/6359