Angular 13升级至14后执行ng build出现多类错误求助

1. Autoprefixer警告：color-adjust已弃用 #

• 问题：Bootstrap CSS中使用的color-adjust属性已被废弃，Autoprefixer提示替换为print-color-adjust
• 解决办法：
  • 升级Bootstrap至5.2及以上版本，新版本已修复该属性问题
  • 手动修改Bootstrap CSS文件，将所有color-adjust替换为print-color-adjust
  • 在postcss.config.js中添加忽略规则：

    module.exports = {
      plugins: [
        require('autoprefixer')({
          overrideBrowserslist: ['last 2 versions'],
          ignoreUnknownVersions: true,
        })
      ]
    }
    

2. CommonJS依赖警告（ngx-google-places-autocomplete） #

• 问题：ngx-google-places-autocomplete采用CommonJS格式，Webpack 5对这类依赖的优化支持有限
• 解决办法：
  • 升级ngx-google-places-autocomplete到支持ES模块的版本
  • 在angular.json的build配置中添加允许规则：

    "build": {
      "options": {
        "allowedCommonJsDependencies": ["ngx-google-places-autocomplete"]
      }
    }
    

3. 模块未找到：无法解析'url' #

• 问题：Webpack 5不再默认提供Node.js核心模块polyfill，Angular平台服务器依赖url模块
• 解决办法：
  • 安装url包：

    npm install url --save-dev
    

  • 在项目根目录创建webpack.config.js，添加fallback配置：

    module.exports = {
      resolve: {
        fallback: {
          "url": require.resolve("url/")
        }
      }
    }
    

  • 若确认不需要该polyfill，可设置为：

    resolve: {
      fallback: {
        "url": false
      }
    }
    

4. @angular/common/http中找不到ɵHttpInterceptorHandler导出 #

• 问题：Angular 14重构了HTTP拦截器内部实现，ɵHttpInterceptorHandler被移除，替换为ɵHttpInterceptingHandler
• 解决办法：
  • 检查项目自定义拦截器或依赖该API的代码，将ɵHttpInterceptorHandler替换为ɵHttpInterceptingHandler
  • 升级依赖旧Angular API的第三方库至兼容14的版本
  • 统一所有@angular包版本：

    npm install @angular/common@14 @angular/platform-server@14 --save
    

内容的提问来源于stack exchange，提问作者Peter The Angular Dude