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


23

离子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不兼容吗?

Answers:


33

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

根据Tran Quang的回答,我去看看的CHANGELOG.mdionic-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 in angular.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文件。但这可能会增加捆绑包的大小。

额外

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


4
解决方案1为我工作
John East

解决方案1也
起作用

1
升级@ ionic / native对我有用。最好尝试并尽可能不包括编译器,因为这会增加输出文件的大小。
Lee Gunn

1
@ShashankAgrawal-抱歉,此评论不是针对您的-我只是在增加“正确的解决方案”的分量,而不是增加人们可能仍会尝试使用的简单的“包括编译器”。
Lee Gunn

1
我的意思是@LeeGunn,如果您不瞄准答案,那没关系:)因为您的评论让我重新考虑,并且我通过将该选项作为最后的选择来改善了答案。
Shashank Agrawal

5

对于Angular:停止终端并重新为其提供服务可以ng serve为我解决问题。


先生,您是一位传奇人物,您不知道我已经失去了多少时间,我本来可以做到的。谢谢!
RubenSzekér

谢谢,这是我的荣幸:)
M FuatNUROĞLU

2

尝试一下ng serve --aot,它可以帮助我解决问题,即如果您要使用aot运行,建议您这样做,因为它与生产版本相似,并且可以帮助您更快地发现错误。

希望这可以帮助。

Angular链接:https//angular.io/guide/aot-compiler


是的,我知道@Tony,但我担心的是为什么升级到9后在正常的Angular应用程序中没有出现此错误。它仅在Ionic应用程序中发生。可能是一些配置问题。
Shashank Agrawal

1

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


这是一个问题还是您想回答一些问题?
Shashank Agrawal

哦,将我的@ ionic-native依赖项更新到最新的稳定版本实际上对我有用。然后,这里不需要其他任何解决方法。
FelschR

0

还需要更新离子,它将起作用。对于角度更新版本,它会更新所有依赖项。但是在离子需要手动更新。

"@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",

0

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


是的,这当然也可以工作,因为npm update它将逐字地更新每个依赖项,并且您不会知道什么更新了什么。这也可能导致其他错误。
Shashank Agrawal
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.