使用 Angular 9 从 Ionic 4 / Angular 7 升级到 Ionic 5

Question

官方 Ionic YouTube 频道上有一个 great tutorial video，它将向您展示升级到 Ionic 5 和 Angular 9 的最佳情况。

然而，对于我去年制作的简单原型应用程序（只是一个让我重新排序列表的演示），我尝试更新，但几乎立即退出 rails。

结果是使用了 "@angular/core": "^7.2.2"，它破坏了 ionic serve 的应用程序，因为它期望 Angular 8.

然后我尝试运行 ng upgrade 但遇到 codelyzer、@ionic/angular-toolkit 和 @angular/http 的不兼容对等依赖项。

所以我尝试先使用 npm i @angular/core@"~8.x.x" 升级到 Angular 8，但由于需要 npm i zone.js@~0.9.1.

而失败了

如何才能成功更新到最新最好的？

Answer 1

所以对于来自 angular 7 的人来说，这个项目的正确升级命令似乎是：

npm i @ionic/angular@latest
npm i zone.js@~0.9.1
npm i @angular/core@"~8.x.x"
npm i @ionic/angular-toolkit@latest
npm i codelyzer@latest
npm remove @angular/http
ng update @angular/core @angular/cli --allow-dirty

它终于更新了所有内容。但是我确实看到一条警告说 Package not installed: "--allow-dirty". Skipping.

然而，在那之后我敢于尝试 ionic build 但由于这个错误而失败了，这让我又被困了 15 分钟：

zone-flags.ts is missing from the TypeScript compilation.

似乎 polyfills.ts 在 include 中使用了 .ts 扩展，这破坏了编译。

我在 polyfills.ts 中更改了这一行：

import './zone-flags.ts';

为此：

import './zone-flags';

编译成功。

但是 ionic serve 做到了吗？

没有。不，它没有。

浏览器在控制台中显示：

Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

所以在之后，我发现如果你打开main.ts然后添加

import '@angular/compiler';

接近顶峰时，世界将再次变得美好...

...除非您的项目随后需要解决标记中断更改，但是 you're on your own for that.

使用 Angular 9 从 Ionic 4 / Angular 7 升级到 Ionic 5

Upgrade to Ionic 5 with Angular 9 from Ionic 4 / Angular 7

ionic-framework

ionic4

ionic5