升级至Angular 13后PlatformLocation相关JIT编译错误如何解决

解决方案 #

1. 配置Angular Linker处理第三方库 #

Angular 13+已全面使用Ivy编译体系，错误核心原因是依赖的第三方Angular库未经过Angular Linker处理，导致降级到JIT编译。

• 若使用Angular CLI原生构建，在angular.json中对应构建配置（客户端build、服务端server）的options下开启"aot": true，CLI会自动处理Linker逻辑
• 若使用自定义Babel配置，在Babel插件列表中添加@angular/compiler-cli/linker/babel，确保所有Angular库在构建时经过Linker编译

2. 修正编译器引入位置 #

你当前仅在客户端入口main.ts引入@angular/compiler，Node端运行时读取的是服务端入口文件，需要将import '@angular/compiler';添加到服务端入口文件（如server.ts）的最顶部，优先级高于所有Angular相关依赖的导入。

3. 调整ngcc配置并重新执行 #

Angular 13针对ESM模块的ngcc编译需要适配参数，修改package.json的postinstall命令为：

ngcc --properties es2020 browser module main server --first-only --create-ivy-entry-points --esm

修改完成后手动执行npm run postinstall（或对应包管理器的执行命令），确保所有依赖的Ivy入口生成正确。

4. 校验依赖版本一致性 #

检查所有@angular/开头的依赖版本，确保@angular/core、@angular/common、@angular/compiler、@angular/platform-server等包的版本完全一致，禁止出现跨版本混用的情况。

5. 临时兼容方案（可选） #

如果需要快速验证，可将服务端引导逻辑替换为动态引导，自动加载JIT编译器：
将服务端入口中platformServer().bootstrapModule(AppServerModule)替换为platformDynamicServer().bootstrapModule(AppServerModule)，其中platformDynamicServer从@angular/platform-server导入。

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