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

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

提问by Shashank Agrawal

Ionic 5 was announceda few hours ago (12th Feb 2020) and I upgraded my one of the small production app to Ionic 5 along with Angular 9:

离子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

But when I did ionic serve, I started getting the bellow error:

但是当我这样做时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)

I came across a few Angular GitHub issues:

我遇到了一些 Angular GitHub 问题：

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

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

They are saying to include import '@angular/compiler';in main.tsfile but when I matched one of my other Angular 9 application (which I updated recently), I don't see such configurations there.

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

Is Angular 9 not compatible with Ionic 5?

Angular 9 与 Ionic 5 不兼容吗？

回答by Shashank Agrawal

Updated & correct solution to fix this

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

Based on the answer from Tran Quang, I went to see the CHANGELOG.mdof ionic-nativeand came to know that they recently updated their package to compile with Angular 9.

基于从答案陈广，我去看了CHANGELOG.md的ionic-native，来到知道他们最近更新了自己的包角9编译。

Hence you need to update any/all dependencies of @ionic-native. For this, look at all the dependencies in your package.gsonfile which start with @ionic-native/and update them one by one.

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

For example, this is my package.gson:

例如，这是我的package.gson：

So I had to run the following commands to update all my @ionic-nativedependencies:

所以我不得不运行以下命令来更新我的所有@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

Same you have to do for your @ionic-nativedependencies. Just make sure, those are updated minimum to v5.21.5(because a few old releases were not working).

您必须为您的@ionic-native依赖项做同样的事情。只要确保这些更新最少v5.21.5（因为一些旧版本不起作用）。

Cheers

干杯

If for some reason, you can't update your @ionic-nativedependencies, look at my original answer for different workarounds/solutions ??

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

---

---

Original Answer

原答案

For me, the following solutions worked. Not sure if they are perfect to add but hoping the Ionic team will fix this as these solutions were not needed when I upgraded my plain Angular app to Angular 9.

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

Solution 1

方案一

Turn off the AOT by changing "aot": trueto "aot: falsein angular.jsonfile. I would not recommend this as this improves the performance of the Angular app and improves the catching of error codes in development mode.

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

Solution 2

解决方案2

If you don't want to change in angular.jsonand wants to fix this issue for ionic serveonly, pass the --aot=falseflag to ngcommand by using --:

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

ionic serve -- --aot=false

Solution 3 (blind option)

方案三（盲选）

If none the solutions above are working for you, you can run a command npm updatewhich will update literally all the dependencies from your package.json(that means, Ionic dependencies will also be updated).

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

This is a blind option because you won't have an idea that which dependencies are updated and what are the breaking changes in those updated dependencies. So you might end up fixing other issues because of this.

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

So it's up to you to take this risk :) Well, this is worth doing if your app is not that big or not using any codes which are removed in the newer dependencies.

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

Solution 4 (the last & worst option)

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

Add import '@angular/compiler';in main.tsfile. But this mightincrease the bundle size.

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

Extra

额外的

While upgrading Ionic, you might face another issue because of wrong importin polyfills.ts. If yes, check out src/zone-flags.ts is missing from the TypeScript compilation after upgrading to Ionic 5

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

回答by M Fuat NURO?LU

For Angular: Stopping the terminal and re-serve it ng servesolved the problem for me.

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

回答by Tony

Try ng serve --aot, it helped me fix the problem, that's if you want to run with aot which is recommended since it will be similar to the production build and it will help you catch errors sooner.

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

Hope this helps.

希望这可以帮助。

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

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

回答by Tr?n Quang Hi?p

Because of ionic update not fast enough, you can try: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Swork for me.

由于离子更新不够快，您可以尝试： npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -S对我来说有效。

update 2020/02/18 => we can run npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Snow to get latest stable version

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

回答by Shyam Vashista

need to update ionic as well, it will work. For angular when update version it updates all dependent itself. But in ionic need to update manually.

还需要更新 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",

回答by HaniBhat

Running npm updatefixed the issue for me.

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