求Angular CLI配置的使用webpack 4.x的最新Angular版本

快速回到业务开发的临时方案 #

• 启动/初始化项目时添加--legacy-browser-support参数，自动处理Webpack 5的兼容问题：

  # 新项目初始化
  ng new my-db-app --legacy-browser-support
  # 已有项目启动
  ng serve --legacy-browser-support
  

• 锁定稳定版本的Angular CLI，避免版本兼容问题：

  # 全局安装指定版本
  npm install -g @angular/cli@15.2.9
  # 项目内安装对应版本
  npm install @angular/cli@15.2.9 --save-dev
  

• 补全缺失的polyfill解决依赖兼容：
  在src/polyfills.ts中添加报错提示的缺失模块，例如：

  import 'core-js/es/array';
  import 'core-js/es/object';
  

无侵入式自定义配置方案 #

• 用官方适配的工具扩展功能，避免手动修改Webpack：
  比如添加数据库相关工具时使用ng add命令，工具会自动适配CLI配置：

  ng add @angular/fire
  

• 用@angular-builders/custom-webpack扩展CLI，无需直接修改Webpack配置文件：

  npm install @angular-builders/custom-webpack --save-dev
  

  随后在angular.json中将构建器替换为@angular-builders/custom-webpack:browser并指定自定义配置路径。

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