执行ng add ng-zorro-antd后Angular项目编译失败求助

问题原因 #

编译报错是因为src/theme.less里导入@angular/cdk/overlay-prebuilt.css的路径不正确，或者@angular/cdk依赖未正确安装。

解决步骤 #

• 检查并安装@angular/cdk
  先确认项目里是否装了对应版本的CDK：

  npm list @angular/cdk
  

  如果没有输出或提示未安装，安装和你Angular版本匹配的CDK（你的Angular是16.2.10，所以装同版本）：

  npm install @angular/cdk@16.2.10 --save
  

• 修正theme.less的导入路径
  打开src/theme.less，找到报错的那行导入代码，替换成以下任意一种正确路径：

  1. 相对项目根目录的路径（theme.less在src下，node_modules在项目根，所以用一级向上跳转）：

     @import (inline) '../node_modules/@angular/cdk/overlay-prebuilt.css';
     

  2. 直接用包名导入（Angular CLI会自动解析node_modules）：

     @import (inline) '@angular/cdk/overlay-prebuilt.css';
     

  3. 用~符号（兼容旧版less-loader）：

     @import (inline) '~@angular/cdk/overlay-prebuilt.css';
     

• 清理缓存重新编译
  执行以下命令清理缓存并重新构建：

  ng clean
  npm install
  ng build
  

备选方案 #

如果上述方法无效，可以尝试重新执行NG-ZORRO的添加命令，选择覆盖现有theme.less文件：

ng add ng-zorro-antd --theme

内容的提问来源于stack exchange，提问作者Sunil Kovalluri