Ionic3与Ionic4变更对比

# 一、项目差异

不ionic了，以后都angular了。命名方式都用angular的了；provider也改成angular的叫法了，以后请叫service

首先，我们还是以传统的angular来使用之

ionic start <name> <template> [options]

ionic start myApp
ionic start myApp blank
ionic start myApp tabs --cordova
ionic start myApp tabs --capacitor
ionic start myApp tabs --type=angular
ionic start myApp blank --type=ionic1

其中，创建使用原生功能的项目，除了Cordova外，多了Capacitor的选择，此外，创建Angular版本ionic4项目的命令是这个(注意：带参数。不带参数创建的是ionic3项目)

ionic start myApp tabs --type=angular

当然也可以用angular-cli创建普通Angular项目，然后npm添加@ionic/core模块，创建完成后到目录结构如下图所示，它不再像ionic3那样封装了angular项目，而是直接就是一个angular项目，而且默认懒加载

# 二、配置和代理

v4同angular配置保持一致，可以在angular.json中进行一系列配置，代理则通过proxy.config.json配置

# 三、依赖变更

• ionic-angular 引入变为了@ionic/angular
• rxjs变化主要是由于rxjs5.5引入了Pipeable Operator，参考这里rxjs

# 四、css

• 和angular保持一致，采用style或styleUrls方式引入，不再使用page-**{}方式
• 全局样式：可以将v3中全局样式放置到global.scss中，也可以创建一个新的scss引入到angular.json中

# 五、路由差异

angular 路由官方文档

• 一、项目差异
• 二、配置和代理
• 三、依赖变更
• 四、css
• 五、路由差异
• 六、生命周期
• 七、懒加载
• 八、组件和指令的变更
• 九、主题样式的变更

← React设计模式和最佳实践总结Taro跨平台开发实践 →