离子5与角9-角JIT编译失败：@角/编译器‘未加载

Question

离子5是几个小时前的宣布 (2020年2月12日)，我把我的一款小型生产应用升级到Ionic 5，还有角9：

# 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)

我遇到了一些角度GitHub问题：

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

他们说将import '@angular/compiler';包含在main.ts文件中，但是当我匹配我的另一个角9应用程序(我最近更新了)时，我没有看到这样的配置。

角9与离子5不兼容吗？

Answer 1

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

基于陈光的回答，我去看了CHANGELOG.md of 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团队将修复这一点，因为这些解决方案是不需要的，当我升级我的纯角度应用程序角9。

解决方案1

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

解决方案2

如果您不想在angular.json中更改并且只想修复ionic serve的这个问题，那么使用--将--aot=false标志传递给ng命令

ionic serve -- --aot=false

解决方案3(盲目选择)

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

这是一个盲目的选择，因为您不会知道哪些依赖项被更新了，哪些是更新后的依赖项中的突然变化。所以你可能会因为这个而解决其他的问题。

所以你应该承担这个风险:)如果你的应用没有那么大，或者不使用任何在新的依赖项中删除的代码，这是值得的。

解决方案4(最后和最坏的选项)

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

额外的

在升级Ionic时，您可能会因为import中的polyfills.ts错误而面临另一个问题。如果是，请查看src/zone-在升级到Ionic 5之后，TypeScript编译中缺少了标志。

Answer 2

角度:停止终端并重新服务它，ng serve为我解决了这个问题。

Answer 3

试试ng serve --aot，它帮助我解决了问题，如果您想使用aot运行，这是推荐的，因为它将类似于生产构建，它将帮助您更快地捕获错误。

希望这能有所帮助。

角连杆：https://angular.io/guide/aot-compiler