从 Ionic 4 / Angular 7 升级到带有 Angular 9 的 Ionic 5

Question

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

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

原来是使用"@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 在包含中使用了.ts 扩展名，这破坏了编译。

我在polyfills.ts改了这一行：

import './zone-flags.ts';

到这里：

import './zone-flags';

它已编译。

但是ionic serve 做到了吗？

没有。不，它没有。

浏览器在控制台中显示：

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

所以some more searching之后发现如果你打开main.ts再添加

import '@angular/compiler';

接近顶峰，然后一切都会好起来，再次与世界相处......

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