Angular CLI 14.0.4添加ng-zorro-antd选sidemenu模板报错

复现步骤 #

按照标准流程搭建基于Ant Design的Angular项目，操作步骤如下：

• 执行命令 npm install --location=global @angular/cli 全局安装Angular CLI
• 执行命令 ng new PROJECT_NAME 创建全新Angular项目
• 执行命令 cd PROJECT_NAME 进入项目根目录
• 执行命令 ng add ng-zorro-antd 引入ng-zorro-antd组件库

执行上述第4步命令的交互流程中，仅当选择Choose template to create project: sidemenu侧边栏模板选项时，会触发报错：Could not find project in workspace: undefined.；若选择Choose template to create project: blank空白模板选项，流程可正常执行无报错。

报错终端输出 #

C:\Users\b\Kiran\angularsrc\T&E\Ant Design Projects\AntDefaultDemo2>ng add ng-zorro-antd
Skipping installation: Package already installed
? Enable icon dynamic loading [ Detail: https://ng.ant.design/components/icon/en ] Yes
? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes
? Choose your locale code: en_US
? Choose template to create project: sidemenu
Could not find project in workspace: undefined

本地环境配置 #

Angular CLI: 14.0.4
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 14.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.4
@angular-devkit/build-angular   14.0.4
@angular-devkit/core            0.1400.4
@angular-devkit/schematics      0.1400.4
@schematics/angular             0.1400.4
rxjs                            7.5.5
typescript                      4.7.4

问题原因 #

该问题是低版本ng-zorro-antd对Angular 14工作区结构的兼容bug：Angular 14新建的单项目工作区默认移除了angular.json中的defaultProject字段，而v14.1.0以下版本的ng-zorro-antd在执行sidemenu模板生成逻辑时，会直接读取该字段作为目标项目名，读取到undefined后就会抛出找不到工作区项目的错误。blank模板的生成逻辑没有依赖该字段，因此可以正常执行。

解决方案 #

可任选以下一种方案解决：

• 方案1：打开项目根目录的angular.json文件，在根层级（和projects、version字段同级）添加"defaultProject": "你的项目名"配置，项目名替换为你执行ng new时设置的PROJECT_NAME，保存后重新执行ng add ng-zorro-antd选择sidemenu模板即可正常运行。
• 方案2：执行ng add ng-zorro-antd时先选择blank模板完成组件库基础引入，之后手动执行生成侧边栏模板的命令，明确指定项目名：ng g ng-zorro-antd:sidemenu 你的项目名 --locale=en_US --dynamicIcon --theme
• 方案3：将ng-zorro-antd升级到v14.1.0及以上的v14大版本，新版本已经修复了该兼容问题，升级后重新执行add命令即可正常选择sidemenu模板。

内容的提问来源于stack exchange，提问作者Kiran Hegana