Angular从9升级至11运行报错与依赖警告问题求助

首先解决ng serve -o抛出的ENOENT: lstat 找不到angular-archwizard/archwizard.css错误：

• 第一步排查配置引用路径：打开项目根目录的angular.json，检索styles数组内所有资源路径，找到对应引用项
  • 先打开本地node_modules/angular-archwizard目录，确认实际css文件位置：Angular11兼容的angular-archwizard 6.x版本，css文件直接在包根目录；7.x及以上版本会把css挪到bundles/archwizard.css路径，旧的根路径文件会被移除。如果是版本升级导致的路径不匹配，直接把angular.json里的引用路径改成和本地包实际结构一致即可
  • 如果angular.json里根本没有手动引用这个css，说明是包版本安装错位：Node 10.16.3环境+Angular11对应的兼容angular-archwizard版本是6.0.0，安装其他高版本会导致路径映射失效，直接执行指定版本重装：npm uninstall angular-archwizard && npm install angular-archwizard@6.0.0 --save
• 第二步清理依赖残留避免路径读取异常：单删对应包往往解决不了node_modules的缓存损坏问题，直接按顺序执行：
  • 删除项目根目录下的node_modules文件夹、package-lock.json文件
  • 执行npm cache clean --force清空npm本地缓存
  • 重新执行npm install完成依赖安装

这些警告反复出现不是因为缺包装了就行，核心原因是版本错配、历史依赖残留、npm识别偏差，逐条对应处理即可，不需要盲目安装所有提示的包：

• TypeScript版本类警告（@angular/compiler-cli@11.2.6、ng-packagr@11.2.4 提示需要typescript>=4.0 <4.2）
  当前环境装的是4.2.3版本，超出了Angular11.2系列的兼容范围，直接执行npm install typescript@4.1.5 --save-dev安装匹配版本，对应警告会直接消失
• Angular生态版本类警告
  • angular-morris-js@2.0.1 提示需要@angular/common@~11.1.0、@angular/core@~11.1.0：当前项目统一安装的是11.2.6版本，属于同主版本下的小版本差异，不会影响运行。如果需要消掉警告，直接在项目根目录新建.npmrc文件，写入peer-deps=false后重新执行npm install即可，不需要强制把所有Angular包降级到11.1.0
  • 残留的@angular/core@2.4.10 相关警告：这是项目历史依赖残留，和当前Angular11环境完全不兼容，直接检索package.json里的依赖条目，删掉误引入的2.x版本Angular相关包，重新安装依赖即可清除
• 第三方工具链类警告
  • ngx-echarts@6.0.1 提示缺resize-observer-polyfill：如果需要兼容IE11等老旧浏览器，直接安装对应包即可；如果项目不需要兼容老环境，这个警告属于可选依赖提示，可直接忽略
  • sass-loader@10.1.1 提示缺fibers：这是用来加速Sass编译的可选依赖，不是构建必需项，装不装都不影响功能，警告可忽略
  • tailwindcss@2.0.4 提示缺autoprefixer@^10.0.2：直接执行npm install autoprefixer@10.4.0 --save-dev安装匹配版本即可解决
  • webpack-subresource-integrity@1.5.2 提示缺对应范围的html-webpack-plugin：Angular11自带的html-webpack-plugin是4.x版本，完全符合提示的版本范围，这个警告属于包自身的peer版本识别bug，用前面提到的.npmrc里的peer-deps=false配置即可消除

注意：不要为了消掉所有警告盲目安装提示里的包，很多警告属于可选依赖、版本范围识别偏差、历史残留，乱装反而会引发新的版本冲突

内容的提问来源于stack exchange，提问作者Rami Khawaly