【问题标题】：Ionic 5 with Angular 9 - Angular JIT compilation failed: '@angular/compiler' not loaded带有 Angular 9 的 Ionic 5 - Angular JIT 编译失败：'@angular/compiler' 未加载
【发布时间】：2020-05-27 16:46:33
【问题描述】：

几个小时前（2020 年 2 月 12 日）Ionic 5 是 announced，我将我的一个小型生产应用程序与 Angular 9 一起升级到了 Ionic 5：

# To update to Ionic 5
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save-exact --save

# To update to Angular 9
ng update @angular/core @angular/cli

但是当我执行ionic serve 时，我开始收到以下错误：

Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at getCompilerFacade (core.js:610)
    at Function.get (core.js:16065)
    at getInjectableDef (core.js:362)
    at injectableDefOrInjectorDefFactory (core.js:16816)

我遇到了一些 Angular GitHub 问题：

他们说要在 main.ts 文件中包含 import '@angular/compiler';，但是当我匹配我的其他 Angular 9 应用程序之一（我最近更新）时，我看不到这样的配置。

Angular 9 与 Ionic 5 不兼容吗？

【问题讨论】：

标签： angular typescript ionic-framework ionic4 ionic-native

【解决方案1】：

更新和正确的解决方案来解决这个问题

根据Tran Quang 的回答，我去看了ionic-native 的CHANGELOG.md 并得知他们最近更新了他们的包以使用Angular 9 进行编译。

因此您需要更新@ionic-native 的任何/所有依赖项。为此，请查看 package.gson 文件中以 @ionic-native/ 开头的所有依赖项并一一更新。

例如，这是我的package.gson：

所以我必须运行以下命令来更新我所有的 @ionic-native 依赖项：

npm i @ionic-native/core@latest
npm i @ionic-native/camera@latest
npm i @ionic-native/firebase-x@latest
npm i @ionic-native/splash-screen@latest
npm i @ionic-native/status-bar@latest

你必须为你的 @ionic-native 依赖做同样的事情。请确保这些至少更新到 v5.21.5（因为一些旧版本无法正常工作）。

干杯???

如果由于某种原因，您无法更新 @ionic-native 依赖项，请查看我的原始答案以了解不同的解决方法/解决方案⬇️

原答案

对我来说，以下解决方案有效。不确定它们是否完美添加，但希望 Ionic 团队能解决这个问题，因为当我将普通的 Angular 应用程序升级到 Angular 9 时不需要这些解决方案。

解决方案 1

通过在angular.json 文件中将"aot": true 更改为"aot: false 来关闭AOT。我不建议这样做，因为这会提高 Angular 应用程序的性能并提高在开发模式下捕获错误代码的能力。

解决方案 2

如果您不想更改 angular.json 并且只想为 ionic serve 解决此问题，请使用 -- 将 --aot=false 标志传递给 ng 命令：

ionic serve -- --aot=false

解决方案 3（盲选）

如果上述解决方案都不适合您，您可以运行命令 npm update，该命令将更新您的 package.json 中的所有依赖项（也就是说，Ionic 依赖项也将被更新）。

这是一个盲目的选择，因为您不知道更新了哪些依赖项以及这些更新的依赖项中有哪些重大更改。因此，您最终可能会因此解决其他问题。

因此，由您来承担这个风险 :) 好吧，如果您的应用程序不是那么大或没有使用在较新的依赖项中删除的任何代码，那么这样做是值得的。

解决方案 4（最后也是最差的选择）

在main.ts 文件中添加import '@angular/compiler';。但这可能会增加捆绑包的大小。

额外

在升级 Ionic 时，您可能会因为 polyfills.ts 中的错误 import 而面临另一个问题。如果是，请查看src/zone-flags.ts is missing from the TypeScript compilation after upgrading to Ionic 5

【讨论】：

这在我为生产构建之前运行良好：ionic cordova build android --prod --release --source-map 然后我们又回到了同样的错误Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
升级@ionic/native 对我有用。最好尽量不要包含编译器，因为它会增加输出文件的大小。
@ShashankAgrawal - 啊抱歉，评论不是针对你的 - 我只是增加了“正确解决方案”的权重，而不是人们可能仍然会被诱惑的简单的“包含编译器”使用。
我明白了你的观点@LeeGunn，如果你不是针对答案，那也没关系:) 因为你的评论让我重新思考，我通过将该选项作为最后的手段来改进答案。
更新 @ionic-native/ 依赖项解决了我在为生产环境构建时遇到的问题：ionic cordova build android --prod。谢谢！

【解决方案2】：

试试ng serve --aot，它帮我解决了这个问题，如果你想用aot运行，推荐使用它，因为它类似于生产版本，它会帮助你更快地发现错误。

希望这会有所帮助。

角度链接：https://angular.io/guide/aot-compiler

【讨论】：

是的，我知道@Tony，但我担心的是为什么这个错误在升级到 9 时没有出现在普通的 Angular 应用程序中。它只发生在 Ionic 应用程序中。可能是一些配置问题。

【解决方案3】：

由于ionic更新不够快，可以试试： npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -S 为我工作。

更新 2020/02/18 => 我们现在可以运行 npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -S 以获取最新的稳定版本

【讨论】：

这是一个问题还是您正在尝试回答什么问题？
哦，好吧，将我的 @ionic-native 依赖项更新到最新的稳定版本实际上对我有用。那么这里提到的其他解决方法都不需要。

【解决方案4】：

对于 Angular：停止终端并重新提供服务ng serve 为我解决了问题。

【讨论】：

先生，您是传奇人物，您不知道我浪费了多少时间，而我本可以做到这一点。谢谢！
谢谢，我很高兴 :)

【解决方案5】：

也需要更新 ionic，它会起作用。对于更新版本时的角度，它会更新所有依赖的自身。但在 ionic 中需要手动更新。

"@angular/common": "9.0.5",
    "@angular/core": "9.0.5",
    "@angular/forms": "9.0.5",
    "@angular/platform-browser": "9.0.5",
    "@angular/platform-browser-dynamic": "9.0.5",
    "@angular/router": "9.0.5",
    "@ckeditor/ckeditor5-angular": "1.2.2",
    "@ckeditor/ckeditor5-build-classic": "17.0.0",
    "@ionic-native/camera": "5.22.0",
    "@ionic-native/core": "5.22.0",
    "@ionic-native/crop": "5.22.0",
    "@ionic-native/device": "5.22.0",
    "@ionic-native/diagnostic": "5.22.0",
    "@ionic-native/document-viewer": "5.22.0",
    "@ionic-native/file": "5.22.0",
    "@ionic-native/file-opener": "5.22.0",
    "@ionic-native/file-path": "5.22.0",
    "@ionic-native/file-transfer": "5.22.0",
    "@ionic-native/fingerprint-aio": "5.22.0",
    "@ionic-native/image-picker": "5.22.0",
    "@ionic-native/in-app-browser": "5.22.0",
    "@ionic-native/network": "5.22.0",
    "@ionic-native/splash-screen": "5.22.0",
    "@ionic-native/status-bar": "5.22.0",
    "@ionic-native/toast": "5.22.0",

【讨论】：

【解决方案6】：

运行 npm update 为我解决了这个问题。

【讨论】：

是的，这当然也可以，因为npm update 会逐个更新每个依赖项，您不会知道更新了什么等等。这也可能导致其他错误。

【解决方案7】：

尝试了多种方法，包括npm update，均未成功。我可以让 Ionic 5 和 Angular 9 在生产模式下工作的唯一方法是在 angular.json 中设置 "aot": false 和 "buildOptimizer": false。

【讨论】：

在我的情况下也是如此。不过，我不确定关闭“buildOptimizer”是否适合生产。我的“直觉”告诉我，这绝对不是。
完全同意@ServerKhalilov，我仍在调查和“努力”以使其工作并发布生产版本，而不是开发版本
请更新您的评论，以防您找到解决方案。
我已经能够将其“固定”到 package.json 中的 MSAL 相关组件（@azure/msal-angular、cordova-plugin-msal、msal）。这 3 个 npm 包中的一个与 IVY 存在不兼容问题。

【解决方案8】：

实际上，我的 .json 文件中没有 @ionic。但是经过大量检查后，我发现我在 ngModule 的导入中编写了一些 Angular 表单模块（Validator、FormGroup、FromControl）。

并且还以错误的方式使用了模块，示例：不要导入 MatSnackBarModule，而是在要导入的特定组件的 .ts 文件中导入 MatSnackBar，对于其他剩余模块也类似，不要以 Module 作为后缀。

但将 MatSnackBarModule 完全导入 app.module.ts 文件中。

注意：我上面以 MatSnackBar 为例进行了解释，它也适用于任何其他模块。

【讨论】：

欢迎来到stackoverflow。你真的在回答问题吗？如果需要，您可以提出单独的问题。