Angular 11升级至14/15/16时编译报错求助

问题1：autoprefixer 提示end值支持度不一致，建议使用flex-end替代 #

• 全局搜索项目 CSS/Scss 文件中的end关键字，直接替换为flex-end即可。这是新版本 autoprefixer 对 Flex 布局属性的兼容性规范要求，替换后可消除该提示。

问题2：选择器错误警告：.custom-file-input:lang(en) ~ .custom-file-label 不匹配伪类:lang #

• 若该选择器来自自定义 CSS，将:lang(en)修改为[lang="en"]来匹配元素的语言属性；若来自 Bootstrap 自带样式，可升级 Bootstrap 到 4.x 最新版本（如^4.6.2），或在不影响功能的前提下忽略该警告。

问题3：模块构建失败——Angular Webpack 插件初始化前尝试触发 Emit #

该问题源于 Ivy 禁用与自定义构建器版本不兼容，解决步骤：

1. 启用 Ivy 编译器：修改tsconfig.json的angularCompilerOptions，将"enableIvy":false改为"enableIvy":true。Angular 14 已全面适配 Ivy，禁用会导致构建工具冲突。
2. 升级自定义 Webpack 构建器：当前@angular-builders/custom-webpack为 12.1.3，版本过低，升级至 Angular 14 兼容版本（如^14.0.0）。
3. 清理依赖缓存：执行以下命令重置依赖：

   rm -rf node_modules package-lock.json
   npm install
   

问题4：目标入口点@ngmodule/material-carousel缺失依赖@angular/compiler/src/core #

• @ngmodule/material-carousel@0.6.0仅兼容旧版 Angular，与 Angular 14 不兼容，可选两种方案：
  1. 替换为兼容组件：使用项目已安装的ngx-owl-carousel-o替代，或改用 Angular Material 官方轮播组件。
  2. 移除该依赖：若项目未使用该组件，直接从package.json中删除@ngmodule/material-carousel，执行npm uninstall @ngmodule/material-carousel，并清理代码中相关导入与使用。

额外依赖版本优化建议 #

• rxjs：升级至 Angular 14 推荐的~7.5.0版本，同时移除rxjs-compat（若代码已适配 rxjs 7 语法）。
• @ngx-translate/core：升级至^14.0.0版本，适配 Angular 14。
• angular-svg-icon：升级至^14.0.0版本，消除版本兼容问题。
• mat-file-upload：升级至^14.0.0版本，匹配 Angular 14 环境。

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