[非官方] 如何在Ionic v3中使用Angular 6的方法(附加说明)

如果查看Ionic v3的dependencies,您会注意到Angular和RxJS都是5系的。这是因为在RxJS5 => 6中有许多破坏性变更的原因。大部分是由于引入pipe操作符造成的。

我认为一旦Ionic Native 5正式发布,这个问题会得到改善。但是,由于Firebase的依赖关系,一些人希望提升Angular和RxJS的版本!因此,我将总结一下这个问题的解决方案。

更新方法

1. 更新 package.json。

首先,您需要将Ionic-Angular从非官方的Git仓库中获取。

"ionic-angular": "git://github.com/rdlabo/ionic-angular-v6.git",

由于这是我自己制作的非官方版本,所以如果你对内容有兴趣,请查看GitHub的文件更改。

请提供Angular、RxJS和Ionic Native的版本。虽然Ionic Native仍为beta版,但已发布支持RxJS 6的beta版,因此我们将使用该版本。如果您使用了除以下之外的其他包,请分别更新它们。

"@angular/common": "~6.1.10",
"@angular/compiler": "~6.1.10",
"@angular/compiler-cli": "~6.1.10",
"@angular/core": "~6.1.10",
"@angular/forms": "~6.1.10",
"@angular/platform-browser": "~6.1.10",
"@angular/platform-browser-dynamic": "~6.1.10",
"@angular/router": "~6.1.10",
"rxjs": "^6.2.2",
"@ionic-native/core": "5.0.0-beta.22",
"@ionic-native/splash-screen": "5.0.0-beta.22",
"@ionic-native/status-bar": "5.0.0-beta.22",

由於在 AoT 构建中可能出現 “Cannot find module .” 的問題,所以將 devDependencies 更新到 TypeScript 版本2.9 之前。經過測試,確定 2.8.3 版本是可運行的。(參考資料)

"@ionic/app-scripts": "3.1.7",
"typescript": "2.8.3"

当设置完成后,请使用npm install命令安装软件包。

2. Ionic Native的import源的变更

在Ionic Native 5中,进行了规格更改以使其可以在除了Angular之外的其他框架中使用。具体而言,当在Angular中使用时,需要从ngx包导入。例如,如果要导入SplashScreen,则需要按照以下方式进行更改。

- import { SplashScreen } from '@ionic-native/splash-screen'; 
+ import { SplashScreen } from '@ionic-native/splash-screen/ngx';

所有的Ionic Native都需要进行更改。

3. RxJS的更改

如果是现有项目,我认为使用RxJS的情况比较多。比如说

this.load().map((data: any) => {

如果是这样,就开始使用管道运算符.

this.load().pipe(map((data: any) => {

语法将会发生变化。关于这次更新的详细信息,请参考 RxJS 6.0 变更点总结(随时更新)。

4. 注射器的补充说明

@Injectable()

In Chinese, the phrase “を” can be paraphrased as “将” .

@Injectable({
  providedIn: 'root',
})

在Angular 6中,Injectable已经进行了更改以实现Tree Shaking,更多详细信息请参阅引入Tree-Shakable DI的Angular v6介绍。

总结

通过Ionic v3,现在可以使用Angular 6。由于Angular / RxJS的版本都是最新的,因此在Firebase上引入新的npm包应该会更加容易。

希望您注意到Ionic Native是Beta版且为非官方方法。

那么,再见。

额外的:Angular 7不能使用吗?

由于依赖问题,无法将 Angular 升级到7,这是由@ionic/app-scripts(负责Angular构建的包)导致的。

"@angular-devkit/build-optimizer": "0.0.35",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",

请问这里需要整理一下,但是修正的范围相当广泛呢… 因为Ionic 4已经接近发布前的稳定状态,所以如果您想使用Angular 7及以上版本的话,考虑升级到Ionic 4会很不错哦!

广告
将在 10 秒后关闭
bannerAds