41

几个小时前（2020 年 2 月 12 日）宣布了Ionic 5 ，我将我的一个小型生产应用程序与 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 问题：

  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 不兼容吗？

4

8 回答 8

58

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

根据Tran Quang的回答，我查看了CHANGELOG.md并ionic-native得知他们最近更新了他们的包以使用 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

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

解决方案 2

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

ionic serve -- --aot=false

解决方案 3（盲选）

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

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

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

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

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

额外的

在升级 Ionic 时，您可能会import因为polyfills.ts. 如果是，请检查升级到 Ionic 5 后 TypeScript 编译中是否缺少 src/zone-flags.ts

于 2020-02-12T07:28:51.453 回答
29

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

于 2020-02-21T11:34:22.293 回答
6

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

希望这可以帮助。

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

于 2020-02-13T02:12:20.770 回答
5

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

于 2020-03-31T00:39:32.583 回答
3

由于离子更新不够快，您可以尝试： 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现在可以运行以获取最新的稳定版本

于 2020-02-17T13:53:34.187 回答
2

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

于 2020-09-23T15:47:42.783 回答
1

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

"@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",
于 2020-03-11T06:43:41.070 回答
0

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

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

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

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

于 2021-07-08T19:48:06.407 回答