Ionic 5 with Angular 9 - Angular JIT 编译失败：'@angular/compiler' 未加载

Question

Ionic 5 announced 几个小时前（2020 年 2 月 12 日），我将我的一个小型生产应用程序与 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 不兼容吗？

Answer 1

已更新并更正解决此问题的解决方案

根据 ionic-native 的 Tran Quang, I went to see the CHANGELOG.md 的回答，了解到他们最近更新了他们的包以使用 Angular 9.

进行编译

因此您需要更新 @ionic-native 的 any/all 个依赖项。为此，请查看 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 依赖项，请查看我的原始答案以了解不同 workarounds/solutions ⬇️

原答案

对我来说，以下解决方案有效。不确定它们是否适合添加，但希望 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

方案三（盲选）

如果 none 上述解决方案对您有效，您可以运行命令 npm update 这将更新 package.json 中的所有依赖项（这意味着, Ionic 依赖项也将更新)。

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

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

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

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

额外

升级 Ionic 时，您可能会遇到另一个问题，因为 polyfills.ts 中的错误 import。如果是，请查看

Answer 2

尝试 ng serve --aot，它帮助我解决了问题，如果你想运行使用推荐的 aot，因为它类似于生产构建，它会帮助你捕获错误早点。

希望对您有所帮助。

Angular Link: https://angular.io/guide/aot-compiler

Answer 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 获取最新的稳定版本

Answer 4

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

Answer 5

还需要更新 ionic，它会起作用。对于 angular 更新版本时，它会更新所有依赖项本身。但在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",

Answer 6

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

Answer 7

尝试了多种方法，包括 npm update，但都没有成功。我可以让带有 Angular 9 的 Ionic 5 在生产模式下工作的唯一方法是在 angular.json.

中设置 "aot": false 和 "buildOptimizer": false

Answer 8

实际上我的 .json 文件中没有@ionic。但是经过大量检查，我发现我在 ngModule.

的导入中编写了一些 angular forms(Validator, FormGroup, FromControl) 模块

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

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

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

Ionic 5 with Angular 9 - Angular JIT 编译失败：'@angular/compiler' 未加载

Ionic 5 with Angular 9 - Angular JIT compilation failed: '@angular/compiler' not loaded

typescript

ionic-framework

ionic-native

angular

ionic4

已更新并更正解决此问题的解决方案

原答案

解决方案 1

解决方案 2

方案三（盲选）

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

额外