带有 Angular 9 的 Ionic 5 - Angular JIT 编译失败：“@angular/compiler”未加载

Question

离子5被公布在几个小时前（2020年2月12日），我用角9一起升级了我的小生产应用中的一个离子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 问题：

1. https://github.com/angular/angular-cli/issues/16873
2. https://github.com/angular/angular/issues/32466

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

Angular 9 与 Ionic 5 不兼容吗？

Answer 1

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

基于从答案陈广，我去看了CHANGELOG.md的ionic-native，来到知道他们最近更新了自己的包角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

通过更改"aot": true为"aot: falseinangular.json文件来关闭 AOT 。我不推荐这样做，因为这可以提高 Angular 应用程序的性能并改进开发模式下错误代码的捕获。

解决方案2

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

ionic serve -- --aot=false

解决方案3（盲选）

如果上述解决方案都不适合您，您可以运行一个命令npm update，该命令将从您的字面上更新所有依赖项package.json（这意味着，Ionic 依赖项也将被更新）。

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

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

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

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

额外的

虽然离子升级，你可能会面对的，因为错误的另一个问题import在polyfills.ts。如果是，请检查升级到 Ionic 5 后 TypeScript 编译中缺少 src/zone-flags.ts

Answer 2

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

Answer 3

尝试ng serve --aot，它帮助我解决了问题，如果您想使用 aot 运行，建议使用它，因为它类似于生产版本，它将帮助您更快地发现错误。

希望这可以帮助。

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

Answer 4

跑步npm update为我解决了这个问题。