Angular 9升级至16：如何校验配置文件是否合规最优？

配置校验工具 #

• Angular CLI 预升级检查：执行 ng update --dry-run，该命令会模拟升级流程，检测当前配置、依赖与 Angular 16 的兼容性，输出需要调整的配置项和依赖版本建议，无需实际修改项目文件。
• TypeScript 配置诊断：运行 tsc --noEmit --diagnostics，TypeScript 编译器会扫描 tsconfig.json，标记冗余、过时或与目标版本不兼容的编译选项，同时输出编译性能相关的诊断信息。
• ESLint 最佳实践校验：若项目已迁移至 ESLint（Angular 12+ 官方推荐），执行 ng lint 并配合 @angular-eslint 规则集，可检测不符合 Angular 最新最佳实践的配置和代码写法。

当前 tsconfig.json 的优化建议 #

结合 Angular 16 与 TypeScript 5.x 的特性，针对你提供的配置给出以下调整点：

1. 移除过时编译选项：
   • emitDecoratorMetadata：Ivy 渲染引擎不再依赖该元数据，移除后可提升编译速度。
   • experimentalDecorators：TypeScript 5.x 已默认启用装饰器支持，无需显式配置。
2. 升级目标环境与库版本：
   • 将 target 设置为 "ES2022"，lib 更新为 ["ES2022", "dom"]，可利用现代 JavaScript 特性，减少不必要的 polyfill，提升运行时性能。
3. 优化模块解析策略：
   • 将 moduleResolution 改为 "bundler"，适配 Angular 16 默认的打包工具（Webpack 5），优化路径解析效率和树摇效果。
4. 启用 Ivy 相关优化：
   • 在 angular.json 的 build 配置中明确添加 "enableIvy": true（尽管日志显示 Ivy 已运行，显式配置可避免潜在兼容问题）；同时开启 "strictTemplates": true，提前捕获模板中的类型错误和潜在问题。
5. 路径别名校验：当前的 paths 配置无明显问题，需确保这些别名在 angular.json 的 build.options.paths 中同步配置，避免打包阶段出现路径解析错误。

替代方案：快速同步标准配置 #

若手动调整配置效率低下，可采用以下方式快速对齐 Angular 16 的标准配置：

• 用 Angular CLI 新建一个空白的 Angular 16 项目，以新项目的 tsconfig.json、angular.json、package.json 作为参考模板，对比当前项目的配置文件，逐步合并差异项。
• 执行 ng update @angular/core@16 @angular/cli@16，CLI 会自动更新大部分核心配置和依赖版本；若存在依赖冲突，可添加 --force 参数（谨慎使用，需后续手动校验冲突项）。

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