ionic4初探

ionic4还是蛮让人心动的，但是android兼容性问题还是有待观望。查看项目进度

1. web component : 所有的 component 都重新改寫成 web component，但是團隊並不是自己刻 web component，而是透過 Stencil 這工具完成的，(相關訊息在此)。
2. Framework Integration& Compatibility: 因為基於 web component ，沒有相依於任何的 framework ，當然就可以拿到任何的 framework 下使用。
3. Angular CLI & Router : 當然 ionic cli 提供建立 Angular 專案類型的指令，在 ionic 3 的路由設定與 Angular 的路由設定是完全不一樣的，而 ionic 4 的路由就跟 Angular 一樣，所以會寫 Angular 就會寫 ionic app.
4. Capacitor

问题点

1.android真机调试白屏，不兼容老版本的Android System Webview

Blank screen when running tabs project on Android without changing code
Stuck at white page after splash screen

Ionic 4 Beta Can only run Android 7.1 and above

原因：

it is the same issue as #15282,
this is caused by cordova-ionic-web-view 2.x.x
The cordova-ionic-web-view requires a higher version of Android System Web View to be installed. The stock Android 5, Android 6 and Android 7.0 do not fulfill this requirement.
So the app can only work on android 7.1 and above.
:(

2.还有一些是因为浏览器对 ECMAScript的兼容问题，主流浏览器新版本基本只做到了兼容es5。

I found the reason: the compiled code of @ionic/angular is not the es5 code.
It use the new async/await keyword in ES2017.

3.做个记号：The key "viewport-fit" is not recognized and ignored. 全面屏刘海的兼容

提供适配 iphoneX 的方法
Designing Websites for iPhone X

......

现在的版本参考：

Ionic:
ionic (Ionic CLI) : 4.5.0 (C:\0-Sarah\node_global\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.17
@angular-devkit/build-angular : 0.10.7
@angular-devkit/schematics : 7.0.7
@angular/cli : 7.0.7
@ionic/angular-toolkit : 1.2.0

Cordova:
cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 4 other plugins)

System:
Android SDK Tools : 26.1.1 (C:\0-Sarah\android-sdk-windows)
NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

Angular CLI: 7.0.7
Node: 8.12.0
OS: win32 x64
Angular: 7.0.4
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular-devkit/architect 0.10.7
@angular-devkit/build-angular 0.10.7
@angular-devkit/build-optimizer 0.10.7
@angular-devkit/build-webpack 0.10.7
@angular-devkit/core 7.0.7
@angular-devkit/schematics 7.0.7
@angular/cli 7.0.7
@ngtools/webpack 7.0.7
@schematics/angular 7.0.7
@schematics/update 0.10.7
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1