merge release-4.7.2

Release 4.7.2 merge to master

.circleci/config.yml

@@ -60,7 +60,7 @@ jobs:
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core
       - run:
-          command: npm run build -- --max-workers 1
+          command: npm run build -- --ci
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core-stencil
       - persist_to_workspace:
@@ -91,6 +91,23 @@ jobs:
           paths:
             - "*"
 
+  build-angular-server:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/angular-server
+      - run:
+          command: npm run build.prod
+          working_directory: /tmp/workspace/packages/angular-server
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -119,7 +136,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.spec
+          command: npm run test.spec --ci
           working_directory: /tmp/workspace/core
 
   test-core-treeshake:
@@ -129,7 +146,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.treeshake
+          command: npm run test.treeshake --ci
           working_directory: /tmp/workspace/core
 
   test-core-screenshot:
@@ -173,6 +190,9 @@ jobs:
       - run:
           command: npm install
           working_directory: /tmp/workspace/angular/test/test-app
+      - run:
+          command: npm run sync
+          working_directory: /tmp/workspace/angular/test/test-app
       - run:
           command: npm test
           working_directory: /tmp/workspace/angular/test/test-app
@@ -205,7 +225,11 @@ workflows:
 
       - build-angular:
           requires: [build-core]
+      - build-angular-server:
+          requires: [build-angular]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:
-          requires: [build-angular]
+          requires:
+            - build-angular
+            - build-angular-server

.github/ISSUE_TEMPLATE/bug_report.md

@@ -37,6 +37,7 @@ assignees: ''
 A sample application via GitHub
 
 StackBlitz (https://stackblitz.com)
+Ionic Angular StackBlitz: https://stackblitz.com/edit/ionic-v4-angular-tabs
 
 Plunker (http://plnkr.co/edit/cpeRJs?p=preview)
 

.github/PROCESS.md

@@ -64,7 +64,7 @@ If the issue is a support question, the submitter should be redirected to our [f
 
 ### Incomplete Template
 
-If the issue template has not been filled out completely, the issue should be closed and locked. The submitter should be informed top re-submit the issue making sure they fill the form out completely. Use the `ionitron: missing template` label to accomplish this.
+If the issue template has not been filled out completely, the issue should be closed and locked. The submitter should be informed to re-submit the issue making sure they fill the form out completely. Use the `ionitron: missing template` label to accomplish this.
 
 ### Issues with Open Questions
 
@@ -77,7 +77,7 @@ NOTE: be sure to perform those actions in the order stated. If you add the comme
 
 If there is a response to the question, the bot will remove the `needs: reply` and apply the `triage` label. The issue will then go through the triage handling again.
 
-if there is no response within 30 days, the issue will be closed and locked.
+If there is no response within 30 days, the issue will be closed and locked.
 
 ## Workflow
 
@@ -221,9 +221,11 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 
 ## Releasing
 
-1. Create the release branch from `master`, for example: `release-4.1.0`.
+1. Create the release branch from `master`, for example: `release-4.5.0`.
 
-1. Submit a pull request from the release branch into `stable`. Do not merge this pull request yet.
+1. For major or minor releases, create a version branch based off the latest version branch. For example, if releasing 4.5.0, create a branch called `4.5.x` based off `4.4.x`.
+
+1. Submit a pull request from the release branch into the version branch. Do not merge this pull request yet.
 
 1. Verify all tests are passing, fix any bugs if needed and make sure no undesired commits are in.
 
@@ -235,7 +237,8 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
     - Select the version based on the type of commits and the [Ionic Versioning](https://ionicframework.com/docs/intro/versioning)
     - After the process completes, verify the version number in all packages (`core`, `docs`, `angular`)
     - Verify the changelog commits are accurate and follow the [proper format]((https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format))
-    - Commit these changes with the version number as the message, e.g. `git commit -m "4.1.0"`
+    - For major or minor releases, ensure that the version number has an associated title (for example: `4.5.0 Boron`)
+    - Commit these changes with the version number as the message, e.g. `git commit -m "4.5.0"`
 
 1. Run `npm run release`
 
@@ -243,10 +246,6 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 
     <img width="191" alt="Merge pull request button" src="https://user-images.githubusercontent.com/236501/47032669-8be1b980-d138-11e8-9a90-d1518c223184.png">
 
-1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch. For example, if this release is for `4.3.1`, the message would be `merge release-4.3.1`.
+1. Rewrite the commit message to `merge release-[VERSION]` with the proper release branch. For example, if this release is for `4.5.0`, the message would be `merge release-4.5.0`.
 
-1. Submit a pull request from the `stable` branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.
-
-1. Merge the release branch into its corresponding version branch.
-    - If this is a major or minor release, create the version branch off the latest `stable`. For example, if this release was `4.2.0`, create a branch called `4.2.x` off of `stable`.
-    - If this is a patch release, merge the release branch into the version branch. For example, if this release is `4.2.1`, merge the release branch into the `4.2.x` branch.
+1. Submit a pull request from the release branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.

.gitignore

@@ -15,6 +15,7 @@ log.txt
 coverage/
 collection/
 dist/
+dist-transpiled/
 node_modules/
 tmp/
 temp/
@@ -49,10 +50,16 @@ demos/src/**/*.ngfactory.ts
 demos/src/**/*.d.ts
 demos/src/**/*.metadata.json
 demos/src/**/*.css.shim.ts
+prerender.html
+prerender-domino.html
+prerender-hydrated.html
+prerender-static.html
 
 # stencil
 angular/css/
 core/css/
+core/hydrate/
 core/loader/
+core/www/
 .stencil/
 angular/build/

.scripts/common.js

@@ -258,11 +258,18 @@ function isVersionGreater(oldVersion, newVersion) {
   return true;
 }
 
+function copyCDNLoader(tasks, version) {
+  tasks.push({
+    title: `Copy CDN loader`,
+    task: () => execa('node', ['copy-cdn-loader.js', version], { cwd: path.join(rootDir, 'core', 'scripts') }),
+  });
+}
 
 module.exports = {
   checkGit,
   isValidVersion,
   isVersionGreater,
+  copyCDNLoader,
   packages,
   packagePath,
   prepareDevPackage,

.scripts/prepare.js

@@ -116,6 +116,7 @@ async function preparePackages(packages, version, install) {
 
   // update core readme with version number
   updateCoreReadme(tasks, version);
+  common.copyCDNLoader(tasks, version);
 
   const listr = new Listr(tasks, { showSubtasks: true });
   await listr.run();
@@ -171,7 +172,6 @@ function updateCoreReadme(tasks, version) {
   });
 }
 
-
 const SEMVER_INCREMENTS = ['patch', 'minor', 'major'];
 
 const isValidVersionInput = input => SEMVER_INCREMENTS.indexOf(input) !== -1 || common.isValidVersion(input);

.scripts/release-dev.js

@@ -7,6 +7,7 @@ const fs = require('fs-extra');
 
 const common = require('./common');
 
+const DIST_NPM_TAG = 'dev';
 const DIST_TAG = 'dev';
 
 async function main() {
@@ -37,7 +38,8 @@ async function main() {
     packages.forEach(package => {
       common.prepareDevPackage(tasks, package, devVersion);
     });
-    common.publishPackages(tasks, packages, devVersion, DIST_TAG);
+    common.copyCDNLoader(tasks, devVersion);
+    common.publishPackages(tasks, packages, devVersion, DIST_NPM_TAG);
 
     const listr = new Listr(tasks);
     await listr.run();

.scripts/release.js

@@ -54,7 +54,7 @@ function publishGit(tasks, version, changelog) {
     },
     {
       title: 'Push tags to remove',
-      task: () => execa('git', ['push', '--tags'], { cwd: common.rootDir })
+      task: () => execa('git', ['push', '--follow-tags'], { cwd: common.rootDir })
     },
     {
       title: 'Publish Github release',

CHANGELOG.md

@@ -1,4 +1,159 @@
-# [4.5.0](https://github.com/ionic-team/ionic/compare/v4.4.2...v4.5.0) (2019-06-12)
+## [4.7.2](https://github.com/ionic-team/ionic/compare/v4.7.1...v4.7.2) (2019-08-07)
+
+
+### Bug Fixes
+
+* **angular:** hardware back button subscribeWithPriority triggers change detection ([#18962](https://github.com/ionic-team/ionic/issues/18962)) ([3a22105](https://github.com/ionic-team/ionic/commit/3a22105)), closes [#18959](https://github.com/ionic-team/ionic/issues/18959)
+* **angular:** nested inputs no longer conflict with each other ([#18976](https://github.com/ionic-team/ionic/issues/18976)) ([6bbdb80](https://github.com/ionic-team/ionic/commit/6bbdb80)), closes [#18248](https://github.com/ionic-team/ionic/issues/18248)
+* **range:** ion-range value now submitted with form ([#19008](https://github.com/ionic-team/ionic/issues/19008)) ([8f7853c](https://github.com/ionic-team/ionic/commit/8f7853c))
+* **reorder:** only move item if reorder happens ([#19007](https://github.com/ionic-team/ionic/issues/19007)) ([d237e80](https://github.com/ionic-team/ionic/commit/d237e80))
+* **router:** partial swipe to go back gesture no longer breaks view([#18977](https://github.com/ionic-team/ionic/issues/18977)) ([713ea8a](https://github.com/ionic-team/ionic/commit/713ea8a)), closes [#18462](https://github.com/ionic-team/ionic/issues/18462)
+* **toast:** allow loading ion-icon from asset path ([#18969](https://github.com/ionic-team/ionic/issues/18969)) ([23f327e](https://github.com/ionic-team/ionic/commit/23f327e))
+* **vue:** rename swipeEnable to swipeGesture ([#17346](https://github.com/ionic-team/ionic/issues/17346)) ([c2348f7](https://github.com/ionic-team/ionic/commit/c2348f7)), closes [#16002](https://github.com/ionic-team/ionic/issues/16002)
+
+
+
+## [4.7.1](https://github.com/ionic-team/ionic/compare/v4.7.0...v4.7.1) (2019-07-26)
+
+
+### Bug Fixes
+
+* **angular:** ensure change detection fires properly ([#18896](https://github.com/ionic-team/ionic/issues/18896)) ([962783b](https://github.com/ionic-team/ionic/commit/962783b)), closes [#18894](https://github.com/ionic-team/ionic/issues/18894)
+
+
+
+# [4.7.0 Nitrogen](https://github.com/ionic-team/ionic/compare/v4.6.2...v4.7.0) (2019-07-24)
+
+
+### Angular 8 Support
+
+With this version comes support for Angular 8! Follow the below steps to update.
+
+1. Update `@ionic/angular` and `@ionic/angular-toolkit` to the latest releases:
+
+    ```shell
+    $ npm install @ionic/angular@4.7.0
+    $ npm install @ionic/angular-toolkit@2.0.0 -D
+    ```
+
+1. Update `@angular/core` and `@angular/cli`:
+
+    ```shell
+    $ npx ng update @angular/core @angular/cli
+    ```
+
+1. Update `@angular-devkit` dependencies:
+
+    ```shell
+    $ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
+    ```
+
+View our [Angular 8 Update Guide](https://docs.google.com/document/d/1QOpQeDifPSg6F9WycDLcbQnpqjN96ew-Ap0_CB7CcCQ/edit?usp=sharing) for tips on potential issues!
+
+### Bug Fixes
+
+* **angular:** copy input form classes to parent ion-item ([#18820](https://github.com/ionic-team/ionic/issues/18820)) ([53179c4](https://github.com/ionic-team/ionic/commit/53179c4)), closes [#18800](https://github.com/ionic-team/ionic/issues/18800)
+* **angular:** add the swipeGesture method for enabling or disabling the ability to swipe open a menu ([#18806](https://github.com/ionic-team/ionic/issues/18806)) ([fbfc076](https://github.com/ionic-team/ionic/commit/fbfc076)), closes [#16002](https://github.com/ionic-team/ionic/issues/16002)
+* **angular:** webview "pause", "resume", and "resize" events now trigger change detection ([#18853](https://github.com/ionic-team/ionic/issues/18853)) ([544e550](https://github.com/ionic-team/ionic/commit/544e550)), closes [#18831](https://github.com/ionic-team/ionic/issues/18831)
+* **core:** apply translucent if backdrop-filter is supported ([#18832](https://github.com/ionic-team/ionic/issues/18832)) ([6b5a59d](https://github.com/ionic-team/ionic/commit/6b5a59d)), closes [ionic-team/ionic-docs#666](https://github.com/ionic-team/ionic-docs/issues/666)
+* **datetime:** allow AM/PM to be changed ([#18684](https://github.com/ionic-team/ionic/issues/18684)) ([b7761fe](https://github.com/ionic-team/ionic/commit/b7761fe)), closes [#18585](https://github.com/ionic-team/ionic/issues/18585)
+* **datetime:** properly apply disabled classes when updating columns ([#18875](https://github.com/ionic-team/ionic/issues/18875)) ([7ba718c](https://github.com/ionic-team/ionic/commit/7ba718c)), closes [#18793](https://github.com/ionic-team/ionic/issues/18793)
+* **hardware-back-button:** hardware back button no longer erroneously restarts app ([#18794](https://github.com/ionic-team/ionic/issues/18794)) ([978cc39](https://github.com/ionic-team/ionic/commit/978cc39)), closes [#18792](https://github.com/ionic-team/ionic/issues/18792)
+* **ripple-effect:** ensure ripple is removed from components after pointer release ([#18854](https://github.com/ionic-team/ionic/issues/18854)) ([71137a2](https://github.com/ionic-team/ionic/commit/71137a2)), closes [#18836](https://github.com/ionic-team/ionic/issues/18836)
+* **searchbar:** add aria and role for improved accessibility ([#18797](https://github.com/ionic-team/ionic/issues/18797)) ([798103b](https://github.com/ionic-team/ionic/commit/798103b)), closes [#18796](https://github.com/ionic-team/ionic/issues/18796)
+* **ssr:** avoid window reference ([#18865](https://github.com/ionic-team/ionic/issues/18865)) ([23ce6fa](https://github.com/ionic-team/ionic/commit/23ce6fa))
+* **ssr:** check for client runtime method ([#18866](https://github.com/ionic-team/ionic/issues/18866)) ([c52b3b4](https://github.com/ionic-team/ionic/commit/c52b3b4))
+* **textarea:** autogrow now resets textarea back to original number of rows when text is cleared ([#18822](https://github.com/ionic-team/ionic/issues/18822)) ([26e6d6f](https://github.com/ionic-team/ionic/commit/26e6d6f)), closes [#18744](https://github.com/ionic-team/ionic/issues/18744)
+* **theming:** update components to use the proper colors for dark themes ([#18735](https://github.com/ionic-team/ionic/issues/18735)) ([045bc59](https://github.com/ionic-team/ionic/commit/045bc59)), closes [#18713](https://github.com/ionic-team/ionic/issues/18713)
+* **virtual-scroll:** card rendering is no longer distorted ([#18877](https://github.com/ionic-team/ionic/issues/18877)) ([3ef6ecf](https://github.com/ionic-team/ionic/commit/3ef6ecf)), closes [#18870](https://github.com/ionic-team/ionic/issues/18870)
+* **virtual-scroll:** element dimensions are recalculated on resize ([#18878](https://github.com/ionic-team/ionic/issues/18878)) ([c91819c](https://github.com/ionic-team/ionic/commit/c91819c))
+
+
+### Features
+
+* **core:** add support for Stackblitz ([#18846](https://github.com/ionic-team/ionic/issues/18846)) ([fb18f3b](https://github.com/ionic-team/ionic/commit/fb18f3b))
+* **ssr:** add @ionic/core/hydrate app ([#18867](https://github.com/ionic-team/ionic/issues/18867)) ([815fa2e](https://github.com/ionic-team/ionic/commit/815fa2e))
+* **navigation:** add experimental shadow to iOS page transitions ([#18695](https://github.com/ionic-team/ionic/issues/18695)) ([9b075ef](https://github.com/ionic-team/ionic/commit/9b075ef)), closes [#18661](https://github.com/ionic-team/ionic/issues/18661)
+* **virtual-scroll:** adds headerHeight and footerHeight to help prevent flickering ([#18851](https://github.com/ionic-team/ionic/issues/18851)) ([0089111](https://github.com/ionic-team/ionic/commit/0089111)), closes [#17540](https://github.com/ionic-team/ionic/issues/17540)
+
+
+### Performance
+
+* **angular:** attach entering view before first change detection and detach leaving page ([#18821](https://github.com/ionic-team/ionic/issues/18821)) ([97fec92](https://github.com/ionic-team/ionic/commit/97fec92))
+
+
+## [4.6.2](https://github.com/ionic-team/ionic/compare/v4.6.1...v4.6.2) (2019-07-10)
+
+
+### Bug Fixes
+
+* **menu-button:** hide menu button when auto hide or split pane ([#18702](https://github.com/ionic-team/ionic/issues/18702)) ([24840d4](https://github.com/ionic-team/ionic/commit/24840d4)), closes [#18666](https://github.com/ionic-team/ionic/issues/18666)
+* **menu-button:** move font-size to host for easier customization ([#18699](https://github.com/ionic-team/ionic/issues/18699)) ([876ab41](https://github.com/ionic-team/ionic/commit/876ab41)), closes [#18667](https://github.com/ionic-team/ionic/issues/18667)
+* **overlays:** fallback to step color if overlay background variable is unset ([#18709](https://github.com/ionic-team/ionic/issues/18709)) ([f16b118](https://github.com/ionic-team/ionic/commit/f16b118)), closes [#18658](https://github.com/ionic-team/ionic/issues/18658)
+* **virtual-scroll:**  remove runOutsideAngular error ([#18752](https://github.com/ionic-team/ionic/issues/18752)) ([8beeff2](https://github.com/ionic-team/ionic/commit/8beeff2)), closes [#18746](https://github.com/ionic-team/ionic/issues/18746)
+* **vue:** update imports for types and ionicons ([f56fea6](https://github.com/ionic-team/ionic/commit/f56fea6)), closes [#18701](https://github.com/ionic-team/ionic/issues/18701)
+
+
+### Performance Improvements
+
+* **all:** minify better by using arrow functions ([#18730](https://github.com/ionic-team/ionic/issues/18730)) ([03c1d19](https://github.com/ionic-team/ionic/commit/03c1d19))
+
+
+
+## [4.6.1](https://github.com/ionic-team/ionic/compare/v4.6.0...v4.6.1) (2019-07-09)
+
+
+### Bug Fixes
+
+* **app:** add hydrated to hide white screen with multiple ionic dependencies ([#18649](https://github.com/ionic-team/ionic/issues/18649))
+* **datetime:** datetime no longer reports having a value if none is set ([#18541](https://github.com/ionic-team/ionic/issues/18541)) ([92e0f98](https://github.com/ionic-team/ionic/commit/92e0f98)), closes [#17979](https://github.com/ionic-team/ionic/issues/17979) [#18540](https://github.com/ionic-team/ionic/issues/18540)
+* **fab-button:** set opacity on disabled fab button ([#18685](https://github.com/ionic-team/ionic/issues/18685)) ([6042b39](https://github.com/ionic-team/ionic/commit/6042b39)), closes [#18682](https://github.com/ionic-team/ionic/issues/18682)
+* **icon:** load icons properly with baseHref ([#18650](https://github.com/ionic-team/ionic/issues/18650)), ([#18637](https://github.com/ionic-team/ionic/issues/18637))
+* **icon:** bind icon name properly ([#18707](https://github.com/ionic-team/ionic/issues/18707))
+* **infinite-scroll:** fix scroll listener ([0d58101](https://github.com/ionic-team/ionic/commit/0d58101))
+* **item:** do not disable entire item if there are multiple inputs ([#18696](https://github.com/ionic-team/ionic/issues/18696)) ([dfa2b13](https://github.com/ionic-team/ionic/commit/dfa2b13)), closes [#18655](https://github.com/ionic-team/ionic/issues/18655) [#18670](https://github.com/ionic-team/ionic/issues/18670)
+* **router-link:** add missing target prop ([#18659](https://github.com/ionic-team/ionic/issues/18659)) ([1f51ab2](https://github.com/ionic-team/ionic/commit/1f51ab2)), closes [#18655](https://github.com/ionic-team/ionic/issues/18655)
+* **router-outlet:** fix swipe to go back ([b69fb69](https://github.com/ionic-team/ionic/commit/b69fb69))
+* **scss:** copy all scss files ([36a58df](https://github.com/ionic-team/ionic/commit/36a58df))
+* **searchbar:** proper styling after navigating ([#18642](https://github.com/ionic-team/ionic/issues/18642))
+* **slides:** use correct order for pushing slides dynamically ([#18633](https://github.com/ionic-team/ionic/issues/18633))
+* **tabs:** select proper tab by default and do not emit tab change if selectedTab is undefined ([03c834c](https://github.com/ionic-team/ionic/commit/03c834c))
+* **overlay:** make create opts optional ([44c88ad](https://github.com/ionic-team/ionic/commit/44c88ad))
+
+
+### Performance Improvements
+
+* **angular:** skip zone ([e059fc8](https://github.com/ionic-team/ionic/commit/e059fc8))
+
+
+
+# [4.6.0 Carbon](https://github.com/ionic-team/ionic/compare/v4.5.0...v4.6.0) (2019-06-26)
+
+
+### Bug Fixes
+
+* **button:** default opacity for disabled clear buttons ([#18560](https://github.com/ionic-team/ionic/issues/18560)) ([f48dc3d](https://github.com/ionic-team/ionic/commit/f48dc3d)), closes [#18555](https://github.com/ionic-team/ionic/issues/18555)
+* **button:** update solid buttons to use tint and shade colors ([#18537](https://github.com/ionic-team/ionic/issues/18537)) ([26ecf2b](https://github.com/ionic-team/ionic/commit/26ecf2b))
+* **menu:** change ARIA role from complementary to navigation ([#18330](https://github.com/ionic-team/ionic/issues/18330)) ([9e4346b](https://github.com/ionic-team/ionic/commit/9e4346b)), closes [#18318](https://github.com/ionic-team/ionic/issues/18318)
+* **segment:** apply hover properly for segment with color ([#18549](https://github.com/ionic-team/ionic/issues/18549)) ([78e477b](https://github.com/ionic-team/ionic/commit/78e477b))
+* **segment:** default ripple to currentColor ([#18547](https://github.com/ionic-team/ionic/issues/18547)) ([832306c](https://github.com/ionic-team/ionic/commit/832306c))
+
+
+### Features
+
+* **components:** add missing button/a props to components that render them ([#17883](https://github.com/ionic-team/ionic/issues/17883)) ([eca4121](https://github.com/ionic-team/ionic/commit/eca4121)), closes [#16848](https://github.com/ionic-team/ionic/issues/16848) [#16889](https://github.com/ionic-team/ionic/issues/16889)
+* **fab-button:** add hover state using tint colors ([#18536](https://github.com/ionic-team/ionic/issues/18536)) ([ad00679](https://github.com/ionic-team/ionic/commit/ad00679)), closes [#17624](https://github.com/ionic-team/ionic/issues/17624)
+* **item:** add hover and focused states ([#18606](https://github.com/ionic-team/ionic/issues/18606)) ([8a88dd2](https://github.com/ionic-team/ionic/commit/8a88dd2)), closes [#18279](https://github.com/ionic-team/ionic/issues/18279) [#17624](https://github.com/ionic-team/ionic/issues/17624)
+* **router-link:** add router-link and deprecate anchor ([#18620](https://github.com/ionic-team/ionic/issues/18620)) ([d4c7b03](https://github.com/ionic-team/ionic/commit/d4c7b03))
+
+
+### Enhancements
+
+* **stencil:** update to Stencil One to improve app performance 🎉🎊 ([b40f7d3](https://github.com/ionic-team/ionic/commit/b40f7d3))
+
+
+
+# [4.5.0 Boron](https://github.com/ionic-team/ionic/compare/v4.4.2...v4.5.0) (2019-06-12)
 
 
 ### Bug Fixes

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.5.0",
+  "version": "4.7.2",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -19,6 +19,10 @@
     "type": "git",
     "url": "https://github.com/ionic-team/ionic.git"
   },
+  "bugs": {
+    "url": "https://github.com/ionic-team/ionic/issues"
+  },
+  "homepage": "https://ionicframework.com/",
   "scripts": {
     "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
@@ -38,29 +42,29 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "module": "dist/fesm5.js",
-  "main": "dist/fesm5.js",
+  "main": "dist/fesm5.cjs.js",
   "types": "dist/core.d.ts",
   "files": [
     "dist/",
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.5.0",
+    "@ionic/core": "4.7.2",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
-    "@angular-devkit/core": "^7.2.1",
-    "@angular-devkit/schematics": "^7.2.1",
-    "@angular/core": "^7.2.1",
-    "@angular/common": "^7.2.1",
-    "@angular/forms": "^7.2.1",
-    "@angular/router": "^7.2.1",
-    "@angular/compiler": "^7.2.1",
-    "@angular/compiler-cli": "^7.2.1",
-    "@angular/platform-browser": "^7.2.1",
-    "@angular/platform-browser-dynamic": "^7.2.1",
+    "@angular-devkit/core": "7.2.1 - 8",
+    "@angular-devkit/schematics": "7.2.1 - 8",
+    "@angular/core": "7.2.1 - 8",
+    "@angular/common": "7.2.1 - 8",
+    "@angular/forms": "7.2.1 - 8",
+    "@angular/router": "7.2.1 - 8",
+    "@angular/compiler": "7.2.1 - 8",
+    "@angular/compiler-cli": "7.2.1 - 8",
+    "@angular/platform-browser": "7.2.1 - 8",
+    "@angular/platform-browser-dynamic": "7.2.1 - 8",
     "rxjs": ">=6.2.0",
-    "zone.js": "^0.8.26"
+    "zone.js": ">=0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/core": "^7.2.1",
@@ -73,17 +77,17 @@
     "@angular/platform-browser": "^7.2.1",
     "@angular/platform-browser-dynamic": "^7.2.1",
     "@angular/router": "^7.2.1",
-    "@types/node": "~10.12.0",
+    "@types/node": "~12.0.12",
     "fs-extra": "^7.0.0",
-    "glob": "^7.1.3",
-    "rollup": "^1.1.2",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rxjs": "^6.2.0",
+    "glob": "^7.1.4",
+    "rollup": "~1.17.0",
+    "rollup-plugin-node-resolve": "~5.2.0",
+    "rxjs": "^6.5.2",
     "tsickle": "^0.34.0",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",
-    "typescript": "3.2.4",
-    "zone.js": "^0.8.28"
+    "typescript": "~3.2.2",
+    "zone.js": "~0.8.26"
   },
   "schematics": "./dist/schematics/collection.json"
 }

angular/scripts/README.md

@@ -15,3 +15,7 @@
     npm run build.link ../ionic-conference-app
 
 When the command above is ran from the `angular` directory, it will build `@ionic/angular` and copy the `dist` directory to the correct location of another local project. In the example above, the end result is that it copies the `dist` directory to `../ionic-conference-app/node_modules/@ionic/angular/dist`. The path given should be relative to the root of this mono repo.
+
+## package.json note
+
+The `package.json` file in this directory references __Ionic 3__ and is in here to get GitHub to properly show the Used By counts on the repo. __Do not remove it!__

angular/scripts/clean.js

@@ -1,12 +1,12 @@
 const fs = require('fs-extra');
 const path = require('path');
 
+const ROOT_DIR = path.join(__dirname, '..');
 
 const cleanDirs = [
-  'dist'
+  path.join(ROOT_DIR, 'dist')
 ];
 
 cleanDirs.forEach(dir => {
-  const cleanDir = path.join(__dirname, '../', dir);
-  fs.removeSync(cleanDir);
+  fs.emptyDirSync(dir);
 });

angular/scripts/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "ionic-angular",
+  "version": "`gulp package` generates dist/package.json from this template using the root ./package.json",
+  "description": "",
+  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ionic-team/ionic.git"
+  },
+  "license": "MIT",
+  "main": "umd/index.js",
+  "module": "index.js",
+  "es2015": "es2015/index.js",
+  "peerDependencies": {
+  }
+}

angular/scripts/rollup.config.js

@@ -2,15 +2,13 @@ import resolve from 'rollup-plugin-node-resolve';
 
 export default {
   input: 'build/es2015/core.js',
-  output: {
-    file: 'dist/fesm2015.js',
-    format: 'es'
-  },
-  external: (id) => {
-    // inline @ionic/core deps
-    if (id === '@ionic/core') {
-      return false;
+  output: [
+    {
+      file: 'dist/fesm2015.js',
+      format: 'es'
     }
+  ],
+  external: (id) => {
     // anything else is external
     // Windows: C:\xxxxxx\xxx
     const colonPosition = 1;

angular/scripts/rollup.config.legacy.js

@@ -4,6 +4,15 @@ const newConfig = {
   ...config,
   input: 'build/es5/core.js',
 };
-newConfig.output.file = 'dist/fesm5.js';
+newConfig.output = [
+  {
+    file: 'dist/fesm5.js',
+    format: 'es'
+  },
+  {
+    file: 'dist/fesm5.cjs.js',
+    format: 'cjs'
+  }
+];
 
 export { newConfig as default };

angular/src/app-initialize.ts

@@ -1,55 +1,39 @@
-import { defineCustomElements } from '@ionic/core/loader';
+import { NgZone } from '@angular/core';
+import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
 
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
+import { raf } from './util/util';
 
-export function appInitialize(config: Config, doc: Document) {
+export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;
     if (win) {
       const Ionic = win.Ionic = win.Ionic || {};
 
-      Ionic.config = config;
-      Ionic.asyncQueue = false;
-
-      Ionic.ael = (elm, eventName, cb, opts) => {
-        if (elm.__zone_symbol__addEventListener && skipZone(eventName)) {
-          elm.__zone_symbol__addEventListener(eventName, cb, opts);
-        } else {
-          elm.addEventListener(eventName, cb, opts);
-        }
+      Ionic.config = {
+        ...config,
+        _zoneGate: (h: any) => zone.run(h)
       };
 
-      Ionic.rel = (elm, eventName, cb, opts) => {
-        if (elm.__zone_symbol__removeEventListener && skipZone(eventName)) {
-          elm.__zone_symbol__removeEventListener(eventName, cb, opts);
-        } else {
-          elm.removeEventListener(eventName, cb, opts);
-        }
-      };
+      const aelFn = '__zone_symbol__addEventListener' in (doc.body as any)
+        ? '__zone_symbol__addEventListener'
+        : 'addEventListener';
 
-      return defineCustomElements(win, {
-        exclude: ['ion-tabs', 'ion-tab']
+      return applyPolyfills().then(() => {
+        return defineCustomElements(win, {
+          exclude: ['ion-tabs', 'ion-tab'],
+          syncQueue: true,
+          raf,
+          jmp: (h: any) => zone.runOutsideAngular(h),
+          ael(elm, eventName, cb, opts) {
+            (elm as any)[aelFn](eventName, cb, opts);
+          },
+          rel(elm, eventName, cb, opts) {
+            elm.removeEventListener(eventName, cb, opts);
+          }
+        });
       });
     }
   };
-}
-
-const SKIP_ZONE = [
-  'scroll',
-  'resize',
-
-  'touchstart',
-  'touchmove',
-  'touchend',
-
-  'mousedown',
-  'mousemove',
-  'mouseup',
-
-  'ionStyle',
-];
-
-function skipZone(eventName: string) {
-  return SKIP_ZONE.indexOf(eventName) >= 0;
-}
+};

angular/src/directives/control-value-accessors/boolean-value-accessor.ts

@@ -25,8 +25,8 @@ export class BooleanValueAccessor extends ValueAccessor {
     setIonicClasses(this.el);
   }
 
-  @HostListener('ionChange', ['$event.target.checked'])
-  _handleIonChange(value: any) {
-    this.handleChangeEvent(value);
+  @HostListener('ionChange', ['$event.target'])
+  _handleIonChange(el: any) {
+    this.handleChangeEvent(el, el.checked);
   }
 }

angular/src/directives/control-value-accessors/numeric-value-accesssor.ts

@@ -20,9 +20,9 @@ export class NumericValueAccessor extends ValueAccessor {
     super(el);
   }
 
-  @HostListener('ionChange', ['$event.target.value'])
-  _handleIonChange(value: any) {
-    this.handleChangeEvent(value);
+  @HostListener('ionChange', ['$event.target'])
+  _handleIonChange(el: any) {
+    this.handleChangeEvent(el, el.value);
   }
 
   registerOnChange(fn: (_: number | null) => void) {

angular/src/directives/control-value-accessors/radio-value-accessor.ts

@@ -20,8 +20,8 @@ export class RadioValueAccessor extends ValueAccessor {
     super(el);
   }
 
-  @HostListener('ionSelect', ['$event.target.checked'])
-  _handleIonSelect(value: any) {
-    this.handleChangeEvent(value);
+  @HostListener('ionSelect', ['$event.target'])
+  _handleIonSelect(el: any) {
+    this.handleChangeEvent(el, el.checked);
   }
 }

angular/src/directives/control-value-accessors/select-value-accessor.ts

@@ -20,8 +20,8 @@ export class SelectValueAccessor extends ValueAccessor {
     super(el);
   }
 
-  @HostListener('ionChange', ['$event.target.value'])
-  _handleChangeEvent(value: any) {
-    this.handleChangeEvent(value);
+  @HostListener('ionChange', ['$event.target'])
+  _handleChangeEvent(el: any) {
+    this.handleChangeEvent(el, el.value);
   }
 }

angular/src/directives/control-value-accessors/text-value-accessor.ts

@@ -20,8 +20,8 @@ export class TextValueAccessor extends ValueAccessor {
     super(el);
   }
 
-  @HostListener('ionChange', ['$event.target.value'])
-  _handleInputEvent(value: any) {
-    this.handleChangeEvent(value);
+  @HostListener('ionChange', ['$event.target'])
+  _handleInputEvent(el: any) {
+    this.handleChangeEvent(el, el.value);
   }
 }

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -1,6 +1,8 @@
 import { ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
+import { raf } from '../../util/util';
+
 export class ValueAccessor implements ControlValueAccessor {
 
   private onChange: (value: any) => void = () => {/**/};
@@ -14,18 +16,22 @@ export class ValueAccessor implements ControlValueAccessor {
     setIonicClasses(this.el);
   }
 
-  handleChangeEvent(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value;
-      this.onChange(value);
+  handleChangeEvent(el: HTMLElement, value: any) {
+    if (el === this.el.nativeElement) {
+      if (value !== this.lastValue) {
+        this.lastValue = value;
+        this.onChange(value);
+      }
+      setIonicClasses(this.el);
     }
-    setIonicClasses(this.el);
   }
 
-  @HostListener('ionBlur')
-  _handleBlurEvent() {
-    this.onTouched();
-    setIonicClasses(this.el);
+  @HostListener('ionBlur', ['$event.target'])
+  _handleBlurEvent(el: any) {
+    if (el === this.el.nativeElement) {
+      this.onTouched();
+      setIonicClasses(this.el);
+    }
   }
 
   registerOnChange(fn: (value: any) => void) {
@@ -41,8 +47,8 @@ export class ValueAccessor implements ControlValueAccessor {
   }
 }
 
-export function setIonicClasses(element: ElementRef) {
-  requestAnimationFrame(() => {
+export const setIonicClasses = (element: ElementRef) => {
+  raf(() => {
     const input = element.nativeElement as HTMLElement;
     const classes = getClasses(input);
     setClasses(input, classes);
@@ -52,9 +58,9 @@ export function setIonicClasses(element: ElementRef) {
       setClasses(item, classes);
     }
   });
-}
+};
 
-function getClasses(element: HTMLElement) {
+const getClasses = (element: HTMLElement) => {
   const classList = element.classList;
   const classes = [];
   for (let i = 0; i < classList.length; i++) {
@@ -64,9 +70,9 @@ function getClasses(element: HTMLElement) {
     }
   }
   return classes;
-}
+};
 
-function setClasses(element: HTMLElement, classes: string[]) {
+const setClasses = (element: HTMLElement, classes: string[]) => {
   const classList = element.classList;
 
   classList.remove(
@@ -78,8 +84,8 @@ function setClasses(element: HTMLElement, classes: string[]) {
     'ion-pristine'
   );
   classList.add(...classes);
-}
+};
 
-function startsWith(input: string, search: string): boolean {
+const startsWith = (input: string, search: string): boolean => {
   return input.substr(0, search.length) === search;
-}
+};

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common';
-import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
+import { Attribute, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
@@ -57,7 +57,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     private resolver: ComponentFactoryResolver,
     @Attribute('name') name: string,
     @Optional() @Attribute('tabs') tabs: string,
-    private changeDetector: ChangeDetectorRef,
     private config: Config,
     private navCtrl: NavController,
     commonLocation: Location,
@@ -94,7 +93,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     if ((this.nativeEl as any).componentOnReady) {
       this.nativeEl.componentOnReady().then(() => {
         if (this._swipeGesture === undefined) {
-          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', this.nativeEl.mode === 'ios');
+          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
         }
       });
     }
@@ -210,8 +209,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       // Store references to the proxy by component
       this.proxyMap.set(cmpRef.instance, activatedRouteProxy);
       this.currentActivatedRoute$.next({ component: cmpRef.instance, activatedRoute });
-
-      this.changeDetector.markForCheck();
     }
 
     this.activatedView = enteringView;

angular/src/directives/navigation/stack-controller.ts

@@ -31,7 +31,7 @@ export class StackController {
   createView(ref: ComponentRef<any>, activatedRoute: ActivatedRoute): RouteView {
     const url = getUrl(this.router, activatedRoute);
     const element = (ref && ref.location && ref.location.nativeElement) as HTMLElement;
-    const unlistenEvents = bindLifecycleEvents(ref.instance, element);
+    const unlistenEvents = bindLifecycleEvents(this.zone, ref.instance, element);
     return {
       id: this.nextId++,
       stackId: computeStackId(this.tabsPrefix, url),
@@ -59,6 +59,7 @@ export class StackController {
       direction = 'back';
       animation = undefined;
     }
+
     const viewsSnapshot = this.views.slice();
 
     let currentNavigation;
@@ -94,16 +95,36 @@ export class StackController {
       }
     }
 
+    const reused = this.views.includes(enteringView);
     const views = this.insertView(enteringView, direction);
-    return this.wait(async () => {
-      await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
-      await cleanupAsync(enteringView, views, viewsSnapshot, this.location);
-      return {
-        enteringView,
-        direction,
-        animation,
-        tabSwitch
-      };
+
+    // Trigger change detection before transition starts
+    // This will call ngOnInit() the first time too, just after the view
+    // was attached to the dom, but BEFORE the transition starts
+    if (!reused) {
+      enteringView.ref.changeDetectorRef.detectChanges();
+    }
+
+    // Wait until previous transitions finish
+    return this.zone.runOutsideAngular(() => {
+      return this.wait(() => {
+        // disconnect leaving page from change detection to
+        // reduce jank during the page transition
+        if (leavingView) {
+          leavingView.ref.changeDetectorRef.detach();
+        }
+        // In case the enteringView is the same as the leavingPage we need to reattach()
+        enteringView.ref.changeDetectorRef.reattach();
+
+        return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false)
+          .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
+          .then(() => ({
+            enteringView,
+            direction,
+            animation,
+            tabSwitch
+          }));
+      });
     });
   }
 
@@ -138,28 +159,30 @@ export class StackController {
     });
   }
 
-  async startBackTransition() {
+  startBackTransition() {
     const leavingView = this.activeView;
     if (leavingView) {
       const views = this.getStack(leavingView.stackId);
       const enteringView = views[views.length - 2];
-      enteringView.ref.changeDetectorRef.reattach();
-      await this.wait(() => {
+      return this.wait(() => {
         return this.transition(
           enteringView, // entering view
           leavingView, // leaving view
           'back',
-          true,
+          this.canGoBack(2),
           true
         );
       });
     }
+    return Promise.resolve();
   }
 
   endBackTransition(shouldComplete: boolean) {
     if (shouldComplete) {
       this.skipTransition = true;
       this.pop(1);
+    } else if (this.activeView) {
+      cleanup(this.activeView, this.views, this.views, this.location);
     }
   }
 
@@ -189,7 +212,7 @@ export class StackController {
     return this.views.slice();
   }
 
-  private async transition(
+  private transition(
     enteringView: RouteView | undefined,
     leavingView: RouteView | undefined,
     direction: 'forward' | 'back' | undefined,
@@ -198,7 +221,10 @@ export class StackController {
   ) {
     if (this.skipTransition) {
       this.skipTransition = false;
-      return;
+      return Promise.resolve(false);
+    }
+    if (leavingView === enteringView) {
+      return Promise.resolve(false);
     }
     const enteringEl = enteringView ? enteringView.element : undefined;
     const leavingEl = leavingView ? leavingView.element : undefined;
@@ -209,15 +235,17 @@ export class StackController {
         containerEl.appendChild(enteringEl);
       }
 
-      await containerEl.componentOnReady();
-      await containerEl.commit(enteringEl, leavingEl, {
-        deepWait: true,
-        duration: direction === undefined ? 0 : undefined,
-        direction,
-        showGoBack,
-        progressAnimation
-      });
+      if ((containerEl as any).commit) {
+        return containerEl.commit(enteringEl, leavingEl, {
+          deepWait: true,
+          duration: direction === undefined ? 0 : undefined,
+          direction,
+          showGoBack,
+          progressAnimation
+        });
+      }
     }
+    return Promise.resolve(false);
   }
 
   private async wait<T>(task: () => Promise<T>): Promise<T> {
@@ -230,22 +258,24 @@ export class StackController {
   }
 }
 
-function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
-  return new Promise(resolve => {
-    requestAnimationFrame(() => {
-      cleanup(activeRoute, views, viewsSnapshot, location);
-      resolve();
+const cleanupAsync = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
+  if (typeof (requestAnimationFrame as any) === 'function') {
+    return new Promise<any>(resolve => {
+      requestAnimationFrame(() => {
+        cleanup(activeRoute, views, viewsSnapshot, location);
+        resolve();
+      });
     });
-  });
-}
+  }
+  return Promise.resolve();
+};
 
-function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
+const cleanup = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
   viewsSnapshot
     .filter(view => !views.includes(view))
     .forEach(destroyView);
 
   views.forEach(view => {
-
     /**
      * In the event that a user navigated multiple
      * times in rapid succession, we want to make sure
@@ -265,4 +295,4 @@ function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: Rout
       view.ref.changeDetectorRef.detach();
     }
   });
-}
+};

angular/src/directives/navigation/stack-utils.ts

@@ -2,7 +2,7 @@ import { ComponentRef } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
-export function insertView(views: RouteView[], view: RouteView, direction: RouterDirection) {
+export const insertView = (views: RouteView[], view: RouteView, direction: RouterDirection) => {
   if (direction === 'root') {
     return setRoot(views, view);
   } else if (direction === 'forward') {
@@ -10,15 +10,15 @@ export function insertView(views: RouteView[], view: RouteView, direction: Route
   } else {
     return setBack(views, view);
   }
-}
+};
 
-function setRoot(views: RouteView[], view: RouteView) {
+const setRoot = (views: RouteView[], view: RouteView) => {
   views = views.filter(v => v.stackId !== view.stackId);
   views.push(view);
   return views;
-}
+};
 
-function setForward(views: RouteView[], view: RouteView) {
+const setForward = (views: RouteView[], view: RouteView) => {
   const index = views.indexOf(view);
   if (index >= 0) {
     views = views.filter(v => v.stackId !== view.stackId || v.id <= view.id);
@@ -26,30 +26,30 @@ function setForward(views: RouteView[], view: RouteView) {
     views.push(view);
   }
   return views;
-}
+};
 
-function setBack(views: RouteView[], view: RouteView) {
+const setBack = (views: RouteView[], view: RouteView) => {
   const index = views.indexOf(view);
   if (index >= 0) {
     return views.filter(v => v.stackId !== view.stackId || v.id <= view.id);
   } else {
     return setRoot(views, view);
   }
-}
+};
 
-export function getUrl(router: Router, activatedRoute: ActivatedRoute) {
+export const getUrl = (router: Router, activatedRoute: ActivatedRoute) => {
   const urlTree = router.createUrlTree(['.'], { relativeTo: activatedRoute });
   return router.serializeUrl(urlTree);
-}
+};
 
-export function isTabSwitch(enteringView: RouteView, leavingView: RouteView | undefined) {
+export const isTabSwitch = (enteringView: RouteView, leavingView: RouteView | undefined) => {
   if (!leavingView) {
     return true;
   }
   return enteringView.stackId !== leavingView.stackId;
-}
+};
 
-export function computeStackId(prefixUrl: string[] | undefined, url: string) {
+export const computeStackId = (prefixUrl: string[] | undefined, url: string) => {
   if (!prefixUrl) {
     return undefined;
   }
@@ -63,22 +63,22 @@ export function computeStackId(prefixUrl: string[] | undefined, url: string) {
     }
   }
   return undefined;
-}
+};
 
-export function toSegments(path: string): string[] {
+export const toSegments = (path: string) => {
   return path
     .split('/')
     .map(s => s.trim())
     .filter(s => s !== '');
-}
+};
 
-export function destroyView(view: RouteView | undefined) {
+export const destroyView = (view: RouteView | undefined) => {
   if (view) {
     // TODO lifecycle event
     view.ref.destroy();
     view.unlistenEvents();
   }
-}
+};
 
 export interface StackEvent {
   enteringView: RouteView;

angular/src/directives/proxies-utils.ts

@@ -6,7 +6,9 @@ export function proxyInputs(Cmp: any, inputs: string[]) {
   inputs.forEach(item => {
     Object.defineProperty(Prototype, item, {
       get() { return this.el[item]; },
-      set(val: any) { this.el[item] = val; },
+      set(val: any) {
+        this.z.runOutsideAngular(() => this.el[item] = val);
+      },
     });
   });
 }
@@ -16,7 +18,7 @@ export function proxyMethods(Cmp: any, methods: string[]) {
   methods.forEach(methodName => {
     Prototype[methodName] = function() {
       const args = arguments;
-      return this.el.componentOnReady().then((el: any) => el[methodName].apply(el, args));
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
     };
   });
 }

angular/src/directives/virtual-scroll/virtual-scroll.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, NgZone, SimpleChanges, TrackByFunction } from '@angular/core';
-import { Cell, CellType, HeaderFn, ItemHeightFn } from '@ionic/core';
+import { Cell, CellType, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn } from '@ionic/core';
 
 import { proxyInputs, proxyMethods } from '../proxies-utils';
 
@@ -75,7 +75,7 @@ export declare interface IonVirtualScroll {
 
   /**
    * An optional function that maps each item within their height.
-   * When this function is provides, heavy optimizations and fast path can be taked by
+   * When this function is provided, heavy optimizations and fast path can be taked by
    * `ion-virtual-scroll` leading to massive performance improvements.
    *
    * This function allows to skip all DOM reads, which can be Doing so leads
@@ -83,6 +83,16 @@ export declare interface IonVirtualScroll {
    */
   itemHeight?: ItemHeightFn;
 
+  /**
+   * An optional function that maps each item header within their height.
+   */
+  headerHeight?: HeaderHeightFn;
+
+  /**
+   * An optional function that maps each item footer within their height.
+   */
+  footerHeight?: FooterHeightFn;
+
   /**
    * Same as `ngForTrackBy` which can be used on `ngFor`.
    */
@@ -114,6 +124,8 @@ export declare interface IonVirtualScroll {
     'footerFn',
     'items',
     'itemHeight',
+    'headerHeight',
+    'footerHeight',
     'trackBy'
   ]
 })
@@ -128,7 +140,7 @@ export class IonVirtualScroll {
   @ContentChild(VirtualFooter) ftrTmp!: VirtualFooter;
 
   constructor(
-    private zone: NgZone,
+    private z: NgZone,
     private iterableDiffers: IterableDiffers,
     elementRef: ElementRef,
   ) {
@@ -162,7 +174,7 @@ export class IonVirtualScroll {
   }
 
   private nodeRender(el: HTMLElement | null, cell: Cell, index: number): HTMLElement {
-    return this.zone.run(() => {
+    return this.z.run(() => {
       let node: EmbeddedViewRef<VirtualContext>;
       if (!el) {
         node = this.itmTmp.viewContainer.createEmbeddedView(
@@ -194,7 +206,7 @@ export class IonVirtualScroll {
   }
 }
 
-function getElement(view: EmbeddedViewRef<VirtualContext>): HTMLElement {
+const getElement = (view: EmbeddedViewRef<VirtualContext>): HTMLElement => {
   const rootNodes = view.rootNodes;
   for (let i = 0; i < rootNodes.length; i++) {
     if (rootNodes[i].nodeType === 1) {
@@ -202,7 +214,7 @@ function getElement(view: EmbeddedViewRef<VirtualContext>): HTMLElement {
     }
   }
   throw new Error('virtual element was not created');
-}
+};
 
 proxyInputs(IonVirtualScroll, [
   'approxItemHeight',
@@ -211,7 +223,9 @@ proxyInputs(IonVirtualScroll, [
   'headerFn',
   'footerFn',
   'items',
-  'itemHeight'
+  'itemHeight',
+  'headerHeight',
+  'footerHeight'
 ]);
 
 proxyMethods(IonVirtualScroll, [

angular/src/ionic-module.ts

@@ -1,5 +1,5 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
 import { IonicConfig } from '@ionic/core';
 
 import { appInitialize } from './app-initialize';
@@ -142,7 +142,8 @@ export class IonicModule {
           multi: true,
           deps: [
             ConfigToken,
-            DOCUMENT
+            DOCUMENT,
+            NgZone
           ]
         }
       ]

angular/src/providers/action-sheet-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { ActionSheetOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { ActionSheetOptions, actionSheetController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -8,7 +7,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-action-sheet-controller', doc);
+  constructor() {
+    super(actionSheetController);
   }
 }

angular/src/providers/alert-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { AlertOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { AlertOptions, alertController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -8,7 +7,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-alert-controller', doc);
+  constructor() {
+    super(alertController);
   }
 }

angular/src/providers/angular-delegate.ts

@@ -34,10 +34,10 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
-    return new Promise(resolve => {
-      this.zone.run(() => {
+    return this.zone.run(() => {
+      return new Promise(resolve => {
         const el = attachView(
-          this.resolver, this.injector, this.location, this.appRef,
+          this.zone, this.resolver, this.injector, this.location, this.appRef,
           this.elRefMap, this.elEventsMap,
           container, component, params, cssClasses
         );
@@ -47,8 +47,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   }
 
   removeViewFromDom(_container: any, component: any): Promise<void> {
-    return new Promise(resolve => {
-      this.zone.run(() => {
+    return this.zone.run(() => {
+      return new Promise(resolve => {
         const componentRef = this.elRefMap.get(component);
         if (componentRef) {
           componentRef.destroy();
@@ -65,7 +65,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   }
 }
 
-export function attachView(
+export const attachView = (
+  zone: NgZone,
   resolver: ComponentFactoryResolver,
   injector: Injector,
   location: ViewContainerRef | undefined,
@@ -73,7 +74,7 @@ export function attachView(
   elRefMap: WeakMap<HTMLElement, any>,
   elEventsMap: WeakMap<HTMLElement, () => void>,
   container: any, component: any, params: any, cssClasses: string[] | undefined
-) {
+) => {
   const factory = resolver.resolveComponentFactory(component);
   const childInjector = Injector.create({
     providers: getProviders(params),
@@ -93,7 +94,7 @@ export function attachView(
       hostElement.classList.add(clazz);
     }
   }
-  const unbindEvents = bindLifecycleEvents(instance, hostElement);
+  const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
   container.appendChild(hostElement);
 
   if (!location) {
@@ -103,7 +104,7 @@ export function attachView(
   elRefMap.set(hostElement, componentRef);
   elEventsMap.set(hostElement, unbindEvents);
   return hostElement;
-}
+};
 
 const LIFECYCLES = [
   LIFECYCLE_WILL_ENTER,
@@ -113,26 +114,22 @@ const LIFECYCLES = [
   LIFECYCLE_WILL_UNLOAD
 ];
 
-export function bindLifecycleEvents(instance: any, element: HTMLElement) {
-  const unregisters = LIFECYCLES.map(eventName => {
-    const handler = (ev: any) => {
-      if (typeof instance[eventName] === 'function') {
-        instance[eventName](ev.detail);
-      }
-    };
-    element.addEventListener(eventName, handler);
-    return () => {
-      element.removeEventListener(eventName, handler);
-    };
+export const bindLifecycleEvents = (zone: NgZone, instance: any, element: HTMLElement) => {
+  return zone.run(() => {
+    const unregisters = LIFECYCLES
+      .filter(eventName => typeof instance[eventName] === 'function')
+      .map(eventName => {
+        const handler = (ev: any) => instance[eventName](ev.detail);
+        element.addEventListener(eventName, handler);
+        return () => element.removeEventListener(eventName, handler);
+      });
+    return () => unregisters.forEach(fn => fn());
   });
-  return () => {
-    unregisters.forEach(fn => fn());
-  };
-}
+};
 
 const NavParamsToken = new InjectionToken<any>('NavParamsToken');
 
-function getProviders(params: {[key: string]: any}) {
+const getProviders = (params: {[key: string]: any}) => {
   return [
     {
       provide: NavParamsToken, useValue: params
@@ -141,8 +138,8 @@ function getProviders(params: {[key: string]: any}) {
       provide: NavParams, useFactory: provideNavParamsInjectable, deps: [NavParamsToken]
     }
   ];
-}
+};
 
-function provideNavParamsInjectable(params: {[key: string]: any}) {
+const provideNavParamsInjectable = (params: {[key: string]: any}) => {
   return new NavParams(params);
-}
+};

angular/src/providers/config.ts

@@ -42,7 +42,7 @@ export class Config {
 
 export const ConfigToken = new InjectionToken<any>('USERCONFIG');
 
-function getConfig(): CoreConfig | null {
+const getConfig = (): CoreConfig | null => {
   if (typeof (window as any) !== 'undefined') {
     const Ionic = (window as IonicWindow).Ionic;
     if (Ionic && Ionic.config) {
@@ -50,4 +50,4 @@ function getConfig(): CoreConfig | null {
     }
   }
   return null;
-}
+};

angular/src/providers/dom-controller.ts

@@ -22,7 +22,7 @@ export class DomController {
   }
 }
 
-function getQueue() {
+const getQueue = () => {
   const win = typeof (window as any) !== 'undefined' ? window : null as any;
 
   if (win != null) {
@@ -41,6 +41,6 @@ function getQueue() {
     read: (cb: any) => cb(),
     write: (cb: any) => cb()
   };
-}
+};
 
 export type RafCallback = (timeStamp?: number) => void;

angular/src/providers/loading-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { LoadingOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { LoadingOptions, loadingController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -8,7 +7,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-loading-controller', doc);
+  constructor() {
+    super(loadingController);
   }
 }

angular/src/providers/menu-controller.ts

@@ -59,9 +59,21 @@ export class MenuController {
    * @param shouldEnable  True if it should be swipe-able, false if not.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
+   * @deprecated Use swipeGesture() instead
    */
   swipeEnable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'swipeEnable', shouldEnable, menuId);
+    console.warn('MenuController.swipeEnable is deprecated. Use MenuController.swipeGesture() instead');
+    return this.swipeGesture(shouldEnable, menuId);
+  }
+
+  /**
+   * Used to enable or disable the ability to swipe open the menu.
+   * @param shouldEnable  True if it should be swipe-able, false if not.
+   * @param [menuId]  Optionally get the menu by its id, or side.
+   * @return Returns the instance of the menu, which is useful for chaining.
+   */
+  swipeGesture(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
+    return proxyMethod(CTRL, this.doc, 'swipeGesture', shouldEnable, menuId);
   }
 
   /**

angular/src/providers/modal-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
-import { ModalOptions } from '@ionic/core';
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { ModalOptions, modalController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -13,9 +12,8 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    @Inject(DOCUMENT) doc: any
   ) {
-    super('ion-modal-controller', doc);
+    super(modalController);
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {

angular/src/providers/nav-controller.ts

@@ -50,12 +50,12 @@ export class NavController {
 
   /**
    * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
-   * it's equivalent to call `this.router.navigateByUrl()`, but it's explicit about the **direction** of the transition.
+   * it's equivalent to calling `this.router.navigateByUrl()`, but it's explicit about the **direction** of the transition.
    *
-   * Going **forward** means that a new page it's going to be pushed to the stack of the outlet (ion-router-outlet),
+   * Going **forward** means that a new page is going to be pushed to the stack of the outlet (ion-router-outlet),
    * and that it will show a "forward" animation by default.
    *
-   * Navigating forward can also be trigger in a declarative manner by using the `[routerDirection]` directive:
+   * Navigating forward can also be triggered in a declarative manner by using the `[routerDirection]` directive:
    *
    * ```html
    * <a routerLink="/path/to/page" routerDirection="forward">Link</a>
@@ -68,17 +68,17 @@ export class NavController {
 
   /**
    * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
-   * it's equivalent to call:
+   * it's equivalent to calling:
    *
    * ```ts
    * this.navController.setDirection('back');
    * this.router.navigateByUrl(path);
    * ```
    *
-   * Going **back** means that all the pages in the stack until the navigated page is found will be pop,
+   * Going **back** means that all the pages in the stack until the navigated page is found will be popped,
    * and that it will show a "back" animation by default.
    *
-   * Navigating back can also be trigger in a declarative manner by using the `[routerDirection]` directive:
+   * Navigating back can also be triggered in a declarative manner by using the `[routerDirection]` directive:
    *
    * ```html
    * <a routerLink="/path/to/page" routerDirection="back">Link</a>
@@ -91,7 +91,7 @@ export class NavController {
 
   /**
    * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
-   * it's equivalent to call:
+   * it's equivalent to calling:
    *
    * ```ts
    * this.navController.setDirection('root');
@@ -101,7 +101,7 @@ export class NavController {
    * Going **root** means that all existing pages in the stack will be removed,
    * and the navigated page will become the single page in the stack.
    *
-   * Navigating root can also be trigger in a declarative manner by using the `[routerDirection]` directive:
+   * Navigating root can also be triggered in a declarative manner by using the `[routerDirection]` directive:
    *
    * ```html
    * <a routerLink="/path/to/page" routerDirection="root">Link</a>
@@ -114,7 +114,8 @@ export class NavController {
 
   /**
    * Same as [Location](https://angular.io/api/common/Location)'s back() method.
-   * It will use the standard `window.history.back()` under the hood, but featuring a `back` animation.
+   * It will use the standard `window.history.back()` under the hood, but featuring a `back` animation
+   * by default.
    */
   back(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
     this.setDirection('back', options.animated, options.animationDirection);
@@ -122,9 +123,9 @@ export class NavController {
   }
 
   /**
-   * This methods goes back in the context of ionic's stack navigation.
+   * This methods goes back in the context of Ionic's stack navigation.
    *
-   * It recursivelly finds the top active `ion-router-outlet` and calls `pop()`.
+   * It recursively finds the top active `ion-router-outlet` and calls `pop()`.
    * This is the recommended way to go back when you are using `ion-router-outlet`.
    */
   async pop() {
@@ -140,11 +141,11 @@ export class NavController {
   }
 
   /**
-   * This methods specifies the direction of the next navigation performed by the angular router.
+   * This methods specifies the direction of the next navigation performed by the Angular router.
    *
-   * `setDirection()` does not trigger any transition, it just sets a set of flags to be consumed by `ion-router-outlet`.
+   * `setDirection()` does not trigger any transition, it just sets some flags to be consumed by `ion-router-outlet`.
    *
-   * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateBack()` instead of `setDirection()`.
+   * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateRoot()` instead of `setDirection()`.
    */
   setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') {
     this.direction = direction;
@@ -212,7 +213,7 @@ export class NavController {
   }
 }
 
-function getAnimation(direction: RouterDirection, animated: boolean | undefined, animationDirection: 'forward' | 'back' | undefined): NavDirection | undefined {
+const getAnimation = (direction: RouterDirection, animated: boolean | undefined, animationDirection: 'forward' | 'back' | undefined): NavDirection | undefined => {
   if (animated === false) {
     return undefined;
   }
@@ -225,7 +226,7 @@ function getAnimation(direction: RouterDirection, animated: boolean | undefined,
     return 'forward';
   }
   return undefined;
-}
+};
 
 const DEFAULT_DIRECTION = 'auto';
 const DEFAULT_ANIMATED = undefined;

angular/src/providers/picker-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { PickerOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { PickerOptions, pickerController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -8,7 +7,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-picker-controller', doc);
+  constructor() {
+    super(pickerController);
   }
 }

angular/src/providers/platform.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, NgZone } from '@angular/core';
 import { BackButtonEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { Subject, Subscription } from 'rxjs';
 
@@ -42,29 +42,30 @@ export class Platform {
    */
   resize = new Subject<void>();
 
-  constructor(@Inject(DOCUMENT) private doc: any) {
-    this.win = doc.defaultView;
+  constructor(@Inject(DOCUMENT) private doc: any, zone: NgZone) {
+    zone.run(() => {
+      this.win = doc.defaultView;
+      this.backButton.subscribeWithPriority = function(priority, callback) {
+        return this.subscribe(ev => (
+          ev.register(priority, () => zone.run(callback))
+        ));
+      };
 
-    this.backButton.subscribeWithPriority = function(priority, callback) {
-      return this.subscribe(ev => {
-        ev.register(priority, callback);
-      });
-    };
+      proxyEvent(this.pause, doc, 'pause');
+      proxyEvent(this.resume, doc, 'resume');
+      proxyEvent(this.backButton, doc, 'ionBackButton');
+      proxyEvent(this.resize, this.win, 'resize');
 
-    proxyEvent(this.pause, doc, 'pause');
-    proxyEvent(this.resume, doc, 'resume');
-    proxyEvent(this.backButton, doc, 'ionBackButton');
-    proxyEvent(this.resize, this.win, 'resize');
-
-    let readyResolve: (value: string) => void;
-    this._readyPromise = new Promise(res => { readyResolve = res; });
-    if (this.win && this.win['cordova']) {
-      doc.addEventListener('deviceready', () => {
-        readyResolve('cordova');
-      }, { once: true });
-    } else {
-      readyResolve!('dom');
-    }
+      let readyResolve: (value: string) => void;
+      this._readyPromise = new Promise(res => { readyResolve = res; });
+      if (this.win && this.win['cordova']) {
+        doc.addEventListener('deviceready', () => {
+          readyResolve('cordova');
+        }, { once: true });
+      } else {
+        readyResolve!('dom');
+      }
+    });
   }
 
   /**

angular/src/providers/popover-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
-import { PopoverOptions } from '@ionic/core';
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { PopoverOptions, popoverController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -13,9 +12,8 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    @Inject(DOCUMENT) doc: any
   ) {
-    super('ion-popover-controller', doc);
+    super(popoverController);
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {

angular/src/providers/toast-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { ToastOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { ToastOptions, toastController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -8,7 +7,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-toast-controller', doc);
+  constructor() {
+    super(toastController);
   }
 }

angular/src/types/interfaces.ts

@@ -1,13 +1,15 @@
 
 export interface IonicGlobal {
   config?: any;
-  ael?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
-  raf?: (ts: number) => void;
-  rel?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
   asyncQueue?: boolean;
 }
 
 export interface IonicWindow extends Window {
   Ionic: IonicGlobal;
-  __zone_symbol__requestAnimationFrame: (ts: number) => void;
+  __zone_symbol__requestAnimationFrame?: (ts: FrameRequestCallback) => number;
+}
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  forceUpdate(): void;
 }

angular/src/util/ionic-router-reuse-strategy.ts

@@ -25,9 +25,6 @@ export class IonicRouteStrategy implements RouteReuseStrategy {
     if (future.routeConfig !== curr.routeConfig) {
       return false;
     }
-    if (future.component !== curr.component) {
-      return false;
-    }
 
     // checking router params
     const futureParams = future.params;

angular/src/util/overlay.ts

@@ -1,26 +1,32 @@
-import { proxyMethod } from './util';
 
-export class OverlayBaseController<Opts, Overlay> {
-  constructor(private ctrl: string, private doc: Document) {}
+interface ControllerShape<Opts, HTMLElm> {
+  create(options: Opts): Promise<HTMLElm>;
+  dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
+  getTop(): Promise<HTMLElm | undefined>;
+}
+
+export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opts, Overlay> {
+  constructor(private ctrl: ControllerShape<Opts, Overlay>) {}
 
   /**
    * Creates a new overlay
    */
-  create(opts?: Opts): Promise<Overlay> {
-    return proxyMethod(this.ctrl, this.doc, 'create', opts);
+  create(opts?: Opts) {
+    // TODO: next major release opts is not optional
+    return this.ctrl.create((opts || {}) as any);
   }
 
   /**
    * When `id` is not provided, it dismisses the top overlay.
    */
-  dismiss(data?: any, role?: string, id?: string): Promise<void> {
-    return proxyMethod(this.ctrl, this.doc, 'dismiss', data, role, id);
+  dismiss(data?: any, role?: string, id?: string) {
+    return this.ctrl.dismiss(data, role, id);
   }
 
   /**
    * Returns the top overlay.
    */
-  getTop(): Promise<Overlay | undefined> {
-    return proxyMethod(this.ctrl, this.doc, 'getTop');
+  getTop() {
+    return this.ctrl.getTop();
   }
 }

angular/src/util/util.ts

@@ -1,15 +1,29 @@
+import { HTMLStencilElement } from '../types/interfaces';
 
-export function proxyMethod(ctrlName: string, doc: Document, methodName: string, ...args: any[]) {
+declare const __zone_symbol__requestAnimationFrame: any;
+declare const requestAnimationFrame: any;
+
+export const raf = (h: any) => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(h);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(h);
+  }
+  return setTimeout(h);
+};
+
+export const proxyMethod = (ctrlName: string, doc: Document, methodName: string, ...args: any[]) => {
   const controller = ensureElementInBody(ctrlName, doc);
   return controller.componentOnReady()
     .then(() => (controller as any)[methodName].apply(controller, args));
-}
+};
 
-export function ensureElementInBody(elementName: string, doc: Document) {
+export const ensureElementInBody = (elementName: string, doc: Document) => {
   let element = doc.querySelector(elementName);
   if (!element) {
     element = doc.createElement(elementName);
     doc.body.appendChild(element);
   }
   return element as HTMLStencilElement;
-}
+};

angular/test/test-app/.npmrc

@@ -0,0 +1 @@
+package-lock=false

angular/test/test-app/angular.json

@@ -13,11 +13,11 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/test-app",
+            "outputPath": "dist/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               {
@@ -31,9 +31,7 @@
                 "output": "./svg"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -86,37 +84,13 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.css"
-            ],
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "styles": ["src/styles.css"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "test-app-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -126,20 +100,39 @@
           "configurations": {
             "production": {
               "devServerTarget": "test-app:serve:production"
+            },
+            "ci": {
+              "devServerTarget": "test-app:serve:ci"
             }
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
           }
         }
       }
     }
   },
   "defaultProject": "test-app"
-}
+}

angular/test/test-app/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

angular/test/test-app/e2e/protractor.conf.js

@@ -1,19 +1,22 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
 const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
-    './**/*.e2e-spec.ts'
+    './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    browserName: 'chrome',
-  
-    chromeOptions: {
-       args: [ "--headless", "--disable-gpu", "--window-size=400,1000", "--start-maximized" ]
-     }
+    'browserName': 'chrome'
+  },
+  chromeOptions: {
+     args: [ "--headless", "--disable-gpu", "--window-size=400,1000", "--start-maximized" ]
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
@@ -25,8 +28,8 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
+      project: require('path').join(__dirname, './tsconfig.json')
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};

angular/test/test-app/e2e/src/form.e2e-spec.ts

@@ -4,12 +4,13 @@ import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
 describe('form', () => {
 
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   describe('change', () => {
     beforeEach(async () => {
       await browser.get('/form');
+      await waitTime(30);
     });
 
     it('should have default values', async () => {
@@ -81,6 +82,7 @@ describe('form', () => {
   describe('blur', () => {
     beforeEach(async () => {
       await browser.get('/form#blur');
+      await waitTime(30);
     });
 
     it('ion-toggle should change only after blur', async () => {

angular/test/test-app/e2e/src/inputs.e2e-spec.ts

@@ -1,13 +1,14 @@
 import { browser, element, by } from 'protractor';
-import { getProperty, setProperty, handleErrorMessages } from './utils';
+import { getProperty, setProperty, handleErrorMessages, waitTime } from './utils';
 
 describe('inputs', () => {
 
   beforeEach(async () => {
     await browser.get('/inputs');
+    await waitTime(30);
   });
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   it('should have default value', async () => {
@@ -59,4 +60,10 @@ describe('inputs', () => {
     expect(await element(by.css('#select-note')).getText()).toEqual('playstation');
     expect(await element(by.css('#range-note')).getText()).toEqual('20');
   });
+
+  it('nested components should not interfere with NgModel', async () => {
+    expect(await element(by.css('#range-note')).getText()).toEqual('10');
+    await element(by.css('#nested-toggle')).click();
+    expect(await element(by.css('#range-note')).getText()).toEqual('10');
+  });
 });

angular/test/test-app/e2e/src/modal.e2e-spec.ts

@@ -5,9 +5,10 @@ describe('modals', () => {
 
   beforeEach(async () => {
     await browser.get('/modals');
+    await waitTime(30);
   });
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   it('should open standalone modal and close', async () => {

angular/test/test-app/e2e/src/navigation.e2e-spec.ts

@@ -4,9 +4,44 @@ import { handleErrorMessages, waitTime, testStack } from './utils';
 describe('navigation', () => {
 
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
+  // TODO: Fix flaky tests
+  xit ('should swipe and abort', async () => {
+    await browser.get('/router-link?ionic:mode=ios');
+    await waitTime(500);
+    await element(by.css('#routerLink')).click();
+    await waitTime(500);
+    await swipeLeft(5);
+    await waitTime(500);
+
+    const pageHidden = element(by.css('app-router-link'));
+    expect(await pageHidden.getAttribute('aria-hidden')).toEqual('true');
+    expect(await pageHidden.getAttribute('class')).toEqual('ion-page ion-page-hidden');
+
+    const pageVisible = element(by.css('app-router-link-page'));
+    expect(await pageVisible.getAttribute('aria-hidden')).toEqual(null);
+    expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back');
+  });
+
+  xit ('should swipe and go back', async () => {
+    await browser.get('/router-link?ionic:mode=ios');
+    await waitTime(500);
+    await element(by.css('#routerLink')).click();
+    await waitTime(500);
+    await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
+
+    await swipeLeft(300);
+
+    await waitTime(1000);
+    await testStack('ion-router-outlet', ['app-router-link']);
+
+    const page = element(by.css('app-router-link'));
+    expect(await page.getAttribute('aria-hidden')).toEqual(null);
+    expect(await page.getAttribute('class')).toEqual('ion-page');
+  })
+
   it('should navigate correctly', async () => {
     await browser.get('/navigation/page1');
     await waitTime(2000);
@@ -22,3 +57,17 @@ describe('navigation', () => {
   });
 
 });
+
+function swipeLeft(end: number) {
+  return browser.driver.touchActions()
+    .tapAndHold({x: 5, y: 1})
+    .move({x: 6, y: 1})
+    .move({x: 7, y: 1})
+    .move({x: 8, y: 1})
+    .move({x: 30, y: 1})
+    .move({x: 300, y: 1})
+    .move({x: end, y: 1})
+    .move({x: end, y: 1})
+    .release({x: end, y: 1})
+    .perform();
+}

angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts

@@ -4,7 +4,7 @@ import { waitTime, handleErrorMessages, goBack } from './utils';
 describe('nested-outlet', () => {
 
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   it('should navigate correctly', async () => {

angular/test/test-app/e2e/src/providers.e2e-spec.ts

@@ -4,7 +4,7 @@ import { handleErrorMessages, waitTime } from './utils';
 describe('providers', () => {
 
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   it('should load all providers', async () => {
@@ -12,6 +12,9 @@ describe('providers', () => {
 
     expect(await element(by.css('#is-loaded')).getText()).toEqual('true');
     expect(await element(by.css('#is-ready')).getText()).toEqual('true');
+    expect(await element(by.css('#is-paused')).getText()).toEqual('true');
+    expect(await element(by.css('#is-resumed')).getText()).toEqual('true');
+    expect(await element(by.css('#is-resized')).getText()).toEqual('true');
     expect(await element(by.css('#is-testing')).getText()).toEqual('false');
     expect(await element(by.css('#is-desktop')).getText()).toEqual('true');
     expect(await element(by.css('#is-mobile')).getText()).toEqual('false');

angular/test/test-app/e2e/src/router-link.e2e-spec.ts

@@ -1,6 +1,5 @@
 import { browser, element, by, protractor } from 'protractor';
-import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
-import { HttpUrlEncodingCodec } from '@angular/common/http';
+import { waitTime, testStack, testLifeCycle, handleErrorMessages, getText } from './utils';
 
 const EC = protractor.ExpectedConditions;
 
@@ -8,36 +7,40 @@ describe('router-link params and fragments', () => {
   const queryParam = 'A&=#Y';
   const fragment = 'myDiv1';
   const id = 'MyPageID==';
-  
+
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
-  
+
   it('should go to a page with properly encoded values', async () => {
     await browser.get('/router-link?ionic:_testing=true');
     await element(by.css('#queryParamsFragment')).click();
-    
+
     const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
 
     browser.wait(EC.urlContains(expectedRoute), 5000);
   });
-  
+
   it('should return to a page with preserved query param and fragment', async () => {
     await browser.get('/router-link?ionic:_testing=true');
+    await waitTime(30);
     await element(by.css('#queryParamsFragment')).click();
-    await element(by.css('#goToPage3')).click(); 
-    
+    await waitTime(400);
+    await element(by.css('#goToPage3')).click();
+
     browser.wait(EC.urlContains('router-link-page3'), 5000);
-    
-    await element(by.css('#goBackFromPage3')).click(); 
-    
+    await waitTime(400);
+
+    await element(by.css('#goBackFromPage3')).click();
+
     const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
     browser.wait(EC.urlContains(expectedRoute), 5000);
   });
-  
+
   it('should preserve query param and fragment with defaultHref string', async () => {
     await browser.get('/router-link-page3?ionic:_testing=true');
-    
+    await waitTime(30);
+
     await element(by.css('#goBackFromPage3')).click();
 
     const expectedRoute = '?token=ABC#fragment';
@@ -49,9 +52,10 @@ describe('router-link', () => {
 
   beforeEach(async () => {
     await browser.get('/router-link');
+    await waitTime(30);
   });
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
 
@@ -69,18 +73,6 @@ describe('router-link', () => {
     it('should go forward with ion-button[routerLink]', async () => {
       await element(by.css('#routerLink')).click();
       await testForward();
-
-      // test go back
-      await element(by.css('ion-back-button')).click();
-      await waitTime(500);
-
-      await testStack('ion-router-outlet', ['app-router-link']);
-      await testLifeCycle('app-router-link', {
-        ionViewWillEnter: 2,
-        ionViewDidEnter: 2,
-        ionViewWillLeave: 1,
-        ionViewDidLeave: 1,
-      });
     });
 
     it('should go forward with a[routerLink]', async () => {
@@ -121,7 +113,6 @@ describe('router-link', () => {
 
     it('should go back with ion-button[routerLink][routerDirection=back]', async () => {
       await element(by.css('#routerLink-back')).click();
-      await testBack();
     });
 
     it('should go back with a[routerLink][routerDirection=back]', async () => {
@@ -137,21 +128,25 @@ describe('router-link', () => {
 });
 
 async function testForward() {
-  await waitTime(500);
+  await waitTime(2500);
   await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
-  await testLifeCycle('app-router-link', {
-    ionViewWillEnter: 1,
-    ionViewDidEnter: 1,
-    ionViewWillLeave: 1,
-    ionViewDidLeave: 1,
-  });
   await testLifeCycle('app-router-link-page', {
     ionViewWillEnter: 1,
     ionViewDidEnter: 1,
     ionViewWillLeave: 0,
     ionViewDidLeave: 0,
   });
+  expect(await getText(`app-router-link-page #canGoBack`)).toEqual('true');
 
+  await browser.navigate().back();
+  await waitTime(100);
+  await testStack('ion-router-outlet', ['app-router-link']);
+  await testLifeCycle('app-router-link', {
+    ionViewWillEnter: 2,
+    ionViewDidEnter: 2,
+    ionViewWillLeave: 1,
+    ionViewDidLeave: 1,
+  });
 }
 
 async function testRoot() {
@@ -163,6 +158,17 @@ async function testRoot() {
     ionViewWillLeave: 0,
     ionViewDidLeave: 0,
   });
+  expect(await getText(`app-router-link-page #canGoBack`)).toEqual('false');
+
+  await browser.navigate().back();
+  await waitTime(100);
+  await testStack('ion-router-outlet', ['app-router-link']);
+  await testLifeCycle('app-router-link', {
+    ionViewWillEnter: 1,
+    ionViewDidEnter: 1,
+    ionViewWillLeave: 0,
+    ionViewDidLeave: 0,
+  });
 }
 
 async function testBack() {
@@ -174,4 +180,15 @@ async function testBack() {
     ionViewWillLeave: 0,
     ionViewDidLeave: 0,
   });
+  expect(await getText(`app-router-link-page #canGoBack`)).toEqual('false');
+
+  await browser.navigate().back();
+  await waitTime(100);
+  await testStack('ion-router-outlet', ['app-router-link']);
+  await testLifeCycle('app-router-link', {
+    ionViewWillEnter: 1,
+    ionViewDidEnter: 1,
+    ionViewWillLeave: 0,
+    ionViewDidLeave: 0,
+  });
 }

angular/test/test-app/e2e/src/slides.e2e-spec.ts

@@ -5,9 +5,10 @@ describe('slides', () => {
 
   beforeEach(async () => {
     await browser.get('/slides');
+    await waitTime(30);
   });
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   it('should change index on slide change', async () => {

angular/test/test-app/e2e/src/tabs.e2e-spec.ts

@@ -3,11 +3,12 @@ import { waitTime, testStack, handleErrorMessages } from './utils';
 
 describe('tabs', () => {
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
   describe('entry url - /tabs', () => {
     beforeEach(async () => {
       await browser.get('/tabs');
+      await waitTime(30);
     });
 
     it('should redirect and load tab-account', async () => {
@@ -19,7 +20,7 @@ describe('tabs', () => {
     it('should simulate stack + double tab click', async () => {
       let tab = await getSelectedTab() as ElementFinder;
       await tab.$('#goto-tab1-page2').click();
-      await testTabTitle('Tab 1 - Page 2');
+      await testTabTitle('Tab 1 - Page 2 (1)');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested']);
       await testState(1, 'account');
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
@@ -30,7 +31,7 @@ describe('tabs', () => {
       await testState(2, 'contact');
 
       await element(by.css('#tab-button-account')).click();
-      tab = await testTabTitle('Tab 1 - Page 2');
+      tab = await testTabTitle('Tab 1 - Page 2 (1)');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
       await testState(3, 'account');
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
@@ -44,7 +45,7 @@ describe('tabs', () => {
     it('should simulate stack + back button click', async () => {
       const tab = await getSelectedTab();
       await tab.$('#goto-tab1-page2').click();
-      await testTabTitle('Tab 1 - Page 2');
+      await testTabTitle('Tab 1 - Page 2 (1)');
       await testState(1, 'account');
 
       await element(by.css('#tab-button-contact')).click();
@@ -52,7 +53,7 @@ describe('tabs', () => {
       await testState(2, 'contact');
 
       await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 2');
+      await testTabTitle('Tab 1 - Page 2 (1)');
       await testState(3, 'account');
 
       await element(by.css('ion-back-button')).click();
@@ -61,6 +62,33 @@ describe('tabs', () => {
       await testState(3, 'account');
     });
 
+    it('should navigate deep then go home', async () => {
+      let tab = await getSelectedTab();
+      await tab.$('#goto-tab1-page2').click();
+      tab = await testTabTitle('Tab 1 - Page 2 (1)');
+
+      await tab.$('#goto-next').click();
+      tab = await testTabTitle('Tab 1 - Page 2 (2)');
+
+      await element(by.css('#tab-button-contact')).click();
+      tab = await testTabTitle('Tab 2 - Page 1');
+
+      await element(by.css('#tab-button-account')).click();
+      await testTabTitle('Tab 1 - Page 2 (2)');
+      await testStack('ion-tabs ion-router-outlet', [
+        'app-tabs-tab1',
+        'app-tabs-tab1-nested',
+        'app-tabs-tab1-nested',
+        'app-tabs-tab2'
+      ]);
+      await element(by.css('#tab-button-account')).click();
+      await testTabTitle('Tab 1 - Page 1');
+      await testStack('ion-tabs ion-router-outlet', [
+        'app-tabs-tab1',
+        'app-tabs-tab2'
+      ]);
+    });
+
     it('should switch tabs and go back', async () => {
       await element(by.css('#tab-button-contact')).click();
       const tab = await testTabTitle('Tab 2 - Page 1');
@@ -75,7 +103,7 @@ describe('tabs', () => {
       const tab = await testTabTitle('Tab 2 - Page 1');
 
       await tab.$('#goto-tab1-page2').click();
-      await testTabTitle('Tab 1 - Page 2');
+      await testTabTitle('Tab 1 - Page 2 (1)');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
     });
 
@@ -96,13 +124,14 @@ describe('tabs', () => {
     });
   });
 
-  describe('entry url - /tabs/account/nested/12', () => {
+  describe('entry url - /tabs/account/nested/1', () => {
     beforeEach(async () => {
-      await browser.get('/tabs/account/nested/12');
+      await browser.get('/tabs/account/nested/1');
+      await waitTime(30);
     });
 
     it('should only display the back-button when there is a page in the stack', async () => {
-      let tab = await testTabTitle('Tab 1 - Page 2') as ElementFinder;
+      let tab = await testTabTitle('Tab 1 - Page 2 (1)') as ElementFinder;
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
 
@@ -110,14 +139,38 @@ describe('tabs', () => {
       tab = await testTabTitle('Tab 1 - Page 1');
 
       await tab.$('#goto-tab1-page2').click();
-      tab = await testTabTitle('Tab 1 - Page 2');
+      tab = await testTabTitle('Tab 1 - Page 2 (1)');
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
     });
+
+    it('should not reuse the same page', async () => {
+      let tab = await testTabTitle('Tab 1 - Page 2 (1)') as ElementFinder;
+      await tab.$('#goto-next').click();
+      tab = await testTabTitle('Tab 1 - Page 2 (2)');
+      await tab.$('#goto-next').click();
+      tab = await testTabTitle('Tab 1 - Page 2 (3)');
+
+      await testStack('ion-tabs ion-router-outlet',[
+        'app-tabs-tab1-nested',
+        'app-tabs-tab1-nested',
+        'app-tabs-tab1-nested'
+      ]);
+
+      await tab.$('ion-back-button').click();
+      tab = await testTabTitle('Tab 1 - Page 2 (2)');
+      await tab.$('ion-back-button').click();
+      tab = await testTabTitle('Tab 1 - Page 2 (1)');
+
+      expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
+
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
+    });
   });
 
   describe('entry url - /tabs/lazy', () => {
     beforeEach(async () => {
       await browser.get('/tabs/lazy');
+      await waitTime(30);
     });
 
     it('should not display the back-button if coming from a different stack', async () => {
@@ -125,7 +178,7 @@ describe('tabs', () => {
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3']);
 
       await tab.$('#goto-tab1-page2').click();
-      tab = await testTabTitle('Tab 1 - Page 2');
+      tab = await testTabTitle('Tab 1 - Page 2 (1)');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3', 'app-tabs-tab1-nested']);
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
     });
@@ -134,12 +187,14 @@ describe('tabs', () => {
   describe('enter url - /tabs/contact/one', () => {
     beforeEach(async () => {
       await browser.get('/tabs/contact/one');
+      await waitTime(30);
     });
 
     it('should return to correct tab after going to page in different outlet', async () => {
       const tab = await getSelectedTab();
       await tab.$('#goto-nested-page1').click();
 
+      await waitTime(600);
       await testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
 
       const nestedOutlet = await element(by.css('app-nested-outlet'));

angular/test/test-app/e2e/src/utils.ts

@@ -37,29 +37,30 @@ export interface LifeCycleCount {
 }
 
 export function handleErrorMessages() {
-  browser.manage().logs().get('browser').then(function(browserLog) {
-    let severWarnings = false;
-
-    for (let i; i <= browserLog.length - 1; i++) {
-        if (browserLog[i].level.name === 'SEVERE') {
-            console.log('\n' + browserLog[i].level.name);
-            console.log('(Possibly exception) \n' + browserLog[i].message);
-
-            severWarnings = true;
-        }
+  return browser.manage().logs().get('browser').then(function (browserLog) {
+    for (let i = 0; i <= browserLog.length - 1; i++) {
+      if (browserLog[i].level.name_ === 'SEVERE') {
+        fail(browserLog[i].message);
+      }
     }
-
-    expect(severWarnings).toBe(false);
   });
 }
 
 export async function testLifeCycle(selector: string, expected: LifeCycleCount) {
   await waitTime(50);
-  expect(await getText(`${selector} #ngOnInit`)).toEqual('1');
-  expect(await getText(`${selector} #ionViewWillEnter`)).toEqual(expected.ionViewWillEnter.toString());
-  expect(await getText(`${selector} #ionViewDidEnter`)).toEqual(expected.ionViewDidEnter.toString());
-  expect(await getText(`${selector} #ionViewWillLeave`)).toEqual(expected.ionViewWillLeave.toString());
-  expect(await getText(`${selector} #ionViewDidLeave`)).toEqual(expected.ionViewDidLeave.toString());
+  const results = await Promise.all([
+    getText(`${selector} #ngOnInit`),
+    getText(`${selector} #ionViewWillEnter`),
+    getText(`${selector} #ionViewDidEnter`),
+    getText(`${selector} #ionViewWillLeave`),
+    getText(`${selector} #ionViewDidLeave`),
+  ]);
+
+  expect(results[0]).toEqual('1');
+  expect(results[1]).toEqual(expected.ionViewWillEnter.toString());
+  expect(results[2]).toEqual(expected.ionViewDidEnter.toString());
+  expect(results[3]).toEqual(expected.ionViewWillLeave.toString());
+  expect(results[4]).toEqual(expected.ionViewDidLeave.toString());
 }
 
 export async function testStack(selector: string, expected: string[]) {

angular/test/test-app/e2e/src/view-child.e2e-spec.ts

@@ -1,13 +1,14 @@
 import { browser, element, by } from 'protractor';
-import { handleErrorMessages } from './utils';
+import { handleErrorMessages, waitTime } from './utils';
 
 describe('view-child', () => {
 
   beforeEach(async () => {
     await browser.get('/view-child');
+    await waitTime(30);
   });
   afterEach(() => {
-    handleErrorMessages();
+    return handleErrorMessages();
   });
 
   it('should get a reference to all children', async () => {

angular/test/test-app/e2e/src/virtual-scroll.e2e-spec.ts

@@ -0,0 +1,18 @@
+import { browser, element, by } from 'protractor';
+import { waitTime, handleErrorMessages } from './utils';
+
+describe('virtual-scroll', () => {
+  afterEach(() => {
+    return handleErrorMessages();
+  });
+  beforeEach(async () => {
+    await browser.get('/virtual-scroll');
+    await waitTime(30);
+  });
+
+  it('should open virtual-scroll', () => {
+    const virtualElements = element.all(by.css('ion-virtual-scroll > *'));
+    expect(virtualElements.count()).toBeGreaterThan(0);
+  });
+
+});

angular/test/test-app/package.json

@@ -1,51 +1,63 @@
 {
-  "name": "test-app",
+  "name": "ionic-angular-test-app",
   "version": "0.0.0",
+  "private": true,
   "scripts": {
     "ng": "ng",
     "start": "npm run sync && ng serve",
     "sync:build": "sh scripts/build-ionic.sh",
     "sync": "sh scripts/sync.sh",
-    "build": "ng build --prod --no-progress",
+    "build": "npm run sync && ng build --prod --no-progress",
     "test": "ng e2e --prod",
+    "test.dev": "npm run sync && ng e2e",
     "lint": "ng lint",
-    "postinstall": "npm run sync"
+    "postinstall": "npm run sync",
+    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
+    "serve:ssr": "node dist/server",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
+    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production"
   },
-  "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.1",
-    "@angular/common": "~7.2.1",
-    "@angular/compiler": "~7.2.1",
-    "@angular/core": "~7.2.1",
-    "@angular/forms": "~7.2.1",
-    "@angular/platform-browser": "~7.2.1",
-    "@angular/platform-browser-dynamic": "~7.2.1",
-    "@angular/router": "~7.2.1",
-    "@ionic/angular": "^4.0.0-rc.1",
+    "@angular/animations": "~8.2.0",
+    "@angular/common": "~8.2.0",
+    "@angular/compiler": "~8.2.0",
+    "@angular/core": "~8.2.0",
+    "@angular/forms": "~8.2.0",
+    "@angular/platform-browser": "~8.2.0",
+    "@angular/platform-browser-dynamic": "~8.2.0",
+    "@angular/platform-server": "~8.2.0",
+    "@angular/router": "~8.2.0",
+    "@ionic/angular": "^4.7.0",
+    "@ionic/angular-server": "^0.0.2",
+    "@nguniversal/express-engine": "~8.1.1",
+    "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
     "core-js": "^2.6.2",
-    "rxjs": "~6.3.3",
+    "express": "^4.15.2",
+    "rxjs": "~6.5.2",
     "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.10.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.12.2",
-    "@angular/cli": "~7.2.1",
-    "@angular/compiler-cli": "~7.2.1",
-    "@angular/language-service": "~7.2.1",
-    "@types/node": "~8.9.4",
-    "@types/jasmine": "~2.8.8",
+    "@angular-devkit/build-angular": "~0.802.0",
+    "@angular/cli": "~8.2.0",
+    "@angular/compiler-cli": "~8.2.0",
+    "@angular/language-service": "~8.2.0",
+    "@types/jasmine": "~3.3.16",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
+    "@types/node": "~12.6.8",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.4",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma": "~4.2.0",
+    "karma-chrome-launcher": "~3.0.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "protractor": "~5.4.2",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.12.1",
-    "typescript": "~3.2.4"
+    "ts-loader": "^5.2.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~5.18.0",
+    "typescript": "~3.5.3",
+    "webpack-cli": "^3.1.0"
   }
 }

angular/test/test-app/scripts/build-ionic.sh

@@ -10,6 +10,14 @@ popd
 pushd angular
 npm link @ionic/core
 npm run build
+npm link
+popd
+
+# Build angular-server
+pushd packages/angular-server
+npm link @ionic/core
+npm link @ionic/angular
+npm run build
 popd
 
 popd

angular/test/test-app/scripts/sync.sh

@@ -1,14 +1,25 @@
 # Copy angular dist
-rm -rf node_modules/@ionic/angular/dist
+rm -rf node_modules/@ionic/angular
+mkdir node_modules/@ionic/angular
 cp -a ../../dist node_modules/@ionic/angular/dist
+cp -a ../../css node_modules/@ionic/angular/css
 cp -a ../../package.json node_modules/@ionic/angular/package.json
 
-# Copy core dist
-rm -rf node_modules/@ionic/core/dist
+# Copy angular server
+rm -rf node_modules/@ionic/angular-server
+mkdir node_modules/@ionic/angular-server
+cp -a ../../../packages/angular-server/dist node_modules/@ionic/angular-server/dist
+cp -a ../../../packages/angular-server/package.json node_modules/@ionic/angular-server/package.json
+
+# # Copy core dist
+rm -rf node_modules/@ionic/core
+mkdir node_modules/@ionic/core
+cp -a ../../../core/css node_modules/@ionic/core/css
 cp -a ../../../core/dist node_modules/@ionic/core/dist
+cp -a ../../../core/hydrate node_modules/@ionic/core/hydrate
 cp -a ../../../core/loader node_modules/@ionic/core/loader
 cp -a ../../../core/package.json node_modules/@ionic/core/package.json
 
-# Copy ionicons
+# # Copy ionicons
 rm -rf node_modules/ionicons
 cp -a ../../../core/node_modules/ionicons node_modules/ionicons

angular/test/test-app/server.ts

@@ -0,0 +1,58 @@
+/**
+ * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
+ *
+ * If your application uses third-party dependencies, you'll need to
+ * either use Webpack or the Angular CLI's `bundleDependencies` feature
+ * in order to adequately package them for use on the server without a
+ * node_modules directory.
+ *
+ * However, due to the nature of the CLI's `bundleDependencies`, importing
+ * Angular in this file will create a different instance of Angular than
+ * the version in the compiled application code. This leads to unavoidable
+ * conflicts. Therefore, please do not explicitly import from @angular or
+ * @nguniversal in this file. You can export any needed resources
+ * from your application's main.server.ts file, as seen below with the
+ * import for `ngExpressEngine`.
+ */
+
+import 'zone.js/dist/zone-node';
+
+import * as express from 'express';
+import {join} from 'path';
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');
+
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+
+app.set('view engine', 'html');
+app.set('views', DIST_FOLDER);
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Serve static files from /browser
+app.get('*.*', express.static(DIST_FOLDER, {
+  maxAge: '1y'
+}));
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});

angular/test/test-app/src/app/alert/alert.component.html

@@ -0,0 +1,10 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Alert test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
+</ion-content>

angular/test/test-app/src/app/alert/alert.component.ts

@@ -0,0 +1,39 @@
+import { Component, NgZone } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+import { NavComponent } from '../nav/nav.component';
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+})
+export class AlertComponent {
+
+  changes = 0;
+
+  constructor(
+    private alertCtrl: AlertController
+  ) { }
+
+  counter() {
+    this.changes++;
+    return Math.floor(this.changes / 2);
+  }
+
+  async openAlert() {
+    const alert = await this.alertCtrl.create({
+      header: 'Hello',
+      message: 'Some text',
+      buttons: [
+        {
+          role: 'cancel',
+          text: 'Cancel',
+          handler: () => {
+            console.log(NgZone.isInAngularZone());
+            NgZone.assertInAngularZone();
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+}

angular/test/test-app/src/app/app-routing.module.ts

@@ -7,10 +7,6 @@ import { RouterLinkPageComponent } from './router-link-page/router-link-page.com
 import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
 import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
 import { HomePageComponent } from './home-page/home-page.component';
-import { TabsComponent } from './tabs/tabs.component';
-import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
-import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
-import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
 import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
 import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
 import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
@@ -23,9 +19,11 @@ import { FormComponent } from './form/form.component';
 import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
+import { AlertComponent } from './alert/alert.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
+  { path: 'alerts', component: AlertComponent },
   { path: 'inputs', component: InputsComponent },
   { path: 'form', component: FormComponent },
   { path: 'modals', component: ModalComponent },
@@ -49,40 +47,7 @@ const routes: Routes = [
   },
   {
     path: 'tabs',
-    component: TabsComponent,
-    children: [
-      {
-        path: 'account',
-        children: [
-          {
-            path: 'nested/:id',
-            component: TabsTab1NestedComponent
-          },
-          {
-            path: '',
-            component: TabsTab1Component
-          }
-        ]
-      },
-      {
-        path: 'contact',
-        children: [
-          {
-            path: 'one',
-            component: TabsTab2Component
-          },
-          {
-            path: '',
-            redirectTo: 'one',
-            pathMatch: 'full'
-          }
-        ]
-      },
-      {
-        path: 'lazy',
-        loadChildren: './tabs-lazy/tabs-lazy.module#TabsLazyModule'
-      }
-    ]
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
   {
     path: 'nested-outlet',

angular/test/test-app/src/app/app.module.ts

@@ -1,10 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouteReuseStrategy } from '@angular/router';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { InputsComponent } from './inputs/inputs.component';
 import { ModalComponent } from './modal/modal.component';
@@ -14,10 +15,6 @@ import { RouterLinkPageComponent } from './router-link-page/router-link-page.com
 import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
 import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
 import { HomePageComponent } from './home-page/home-page.component';
-import { TabsComponent } from './tabs/tabs.component';
-import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
-import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
-import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
 import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
 import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
 import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scroll-inner.component';
@@ -32,6 +29,7 @@ import { FormComponent } from './form/form.component';
 import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
+import { AlertComponent } from './alert/alert.component';
 
 @NgModule({
   declarations: [
@@ -44,10 +42,6 @@ import { NavigationPage3Component } from './navigation-page3/navigation-page3.co
     RouterLinkPage2Component,
     RouterLinkPage3Component,
     HomePageComponent,
-    TabsComponent,
-    TabsTab1Component,
-    TabsTab2Component,
-    TabsTab1NestedComponent,
     VirtualScrollComponent,
     VirtualScrollDetailComponent,
     VirtualScrollInnerComponent,
@@ -61,10 +55,11 @@ import { NavigationPage3Component } from './navigation-page3/navigation-page3.co
     FormComponent,
     NavigationPage1Component,
     NavigationPage2Component,
-    NavigationPage3Component
+    NavigationPage3Component,
+    AlertComponent
   ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
@@ -74,7 +69,9 @@ import { NavigationPage3Component } from './navigation-page3/navigation-page3.co
     ModalExampleComponent,
     NavComponent
   ],
-  providers: [],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

angular/test/test-app/src/app/app.server.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { IonicServerModule } from '@ionic/angular-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+    ModuleMapLoaderModule,
+    IonicServerModule
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

angular/test/test-app/src/app/form/form.component.ts

@@ -20,7 +20,9 @@ export class FormComponent {
       input2: ['Default Value'],
       checkbox: [false],
       range: [5, Validators.min(10)],
-    }, {updateOn: window.location.hash === '#blur' ? 'blur' : 'change'});
+    }, {
+      updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
+    });
   }
 
   onSubmit(_ev) {

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -7,6 +7,11 @@
   </ion-header>
   <ion-content>
     <ion-list>
+      <ion-item routerLink="/alerts">
+        <ion-label>
+          Alerts test
+        </ion-label>
+      </ion-item>
       <ion-item routerLink="/inputs">
         <ion-label>
           Inputs test

angular/test/test-app/src/app/inputs/inputs.component.html

@@ -6,6 +6,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
+  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
   <ion-list>
 
     <ion-item>
@@ -89,10 +90,12 @@
       <ion-range [(ngModel)]="range"></ion-range>
       <ion-note slot="end" id="range-note">{{range}}</ion-note>
     </ion-item>
-    
+
     <ion-item color="dark">
       <ion-label>Range Mirror</ion-label>
-      <ion-range [(ngModel)]="range"></ion-range>
+      <ion-range [(ngModel)]="range">
+        <ion-toggle slot="start" id="nested-toggle" [(ngModel)]="toggle"></ion-toggle>
+      </ion-range>
       <ion-note slot="end">{{range}}</ion-note>
     </ion-item>
 

angular/test/test-app/src/app/inputs/inputs.component.ts

@@ -12,6 +12,7 @@ export class InputsComponent {
   toggle = true;
   select = 'nes';
   range = 10;
+  changes = 0;
 
   setValues() {
     console.log('set values');
@@ -32,4 +33,8 @@ export class InputsComponent {
     this.select = undefined;
     this.range = undefined;
   }
+  counter() {
+    this.changes++;
+    return Math.floor(this.changes / 2);
+  }
 }

angular/test/test-app/src/app/providers/providers.component.html

@@ -12,6 +12,15 @@
     <p>
       isReady: <span id="is-ready">{{isReady}}</span>
     </p>
+    <p>
+      isResumed: <span id="is-resumed">{{isResumed}}</span>
+    </p>
+    <p>
+      isPaused: <span id="is-paused">{{isPaused}}</span>
+    </p>
+    <p>
+      isResized: <span id="is-resized">{{isResized}}</span>
+    </p>
     <p>
       isTesting: <span id="is-testing">{{isTesting}}</span>
     </p>

angular/test/test-app/src/app/providers/providers.component.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import {
-  Platform, Config, ModalController, AlertController, ActionSheetController,
-  PopoverController, ToastController,  Events, PickerController, MenuController,
-  LoadingController, NavController, DomController
+  Platform, ModalController, AlertController, ActionSheetController,
+  PopoverController, ToastController, Events, PickerController, MenuController,
+  LoadingController, NavController, DomController, Config
 } from '@ionic/angular';
 
 @Component({
@@ -14,6 +14,9 @@ export class ProvidersComponent {
   isLoaded = false;
   isReady = false;
   isEvent = false;
+  isResumed = false;
+  isPaused = false;
+  isResized = false;
   isTesting: boolean = undefined;
   isDesktop: boolean = undefined;
   isMobile: boolean = undefined;
@@ -32,7 +35,8 @@ export class ProvidersComponent {
     toastCtrl: ToastController,
     navCtrl: NavController,
     domCtrl: DomController,
-    config: Config
+    config: Config,
+    zone: NgZone
   ) {
     // test all providers load
     if (
@@ -44,15 +48,31 @@ export class ProvidersComponent {
 
     // test platform ready()
     platform.ready().then(() => {
+      NgZone.assertInAngularZone();
       this.isReady = true;
     });
-
+    platform.resume.subscribe(() => {
+      console.log('platform:resume');
+      NgZone.assertInAngularZone();
+      this.isResumed = true;
+    });
+    platform.pause.subscribe(() => {
+      console.log('platform:pause');
+      NgZone.assertInAngularZone();
+      this.isPaused = true;
+    });
+    platform.resize.subscribe(() => {
+      console.log('platform:resize');
+      NgZone.assertInAngularZone();
+      this.isResized = true;
+    });
     this.isDesktop = platform.is('desktop');
     this.isMobile = platform.is('mobile');
 
     // test events
     events.subscribe('topic', () => {
       this.isEvent = true;
+      NgZone.assertInAngularZone();
     });
     events.publish('topic');
 
@@ -60,5 +80,11 @@ export class ProvidersComponent {
     this.isTesting = config.getBoolean('_testing');
     config.set('keyboardHeight', 12345);
     this.keyboardHeight = config.getNumber('keyboardHeight');
+
+    zone.runOutsideAngular(() => {
+      document.dispatchEvent(new CustomEvent('pause'));
+      document.dispatchEvent(new CustomEvent('resume'));
+      window.dispatchEvent(new CustomEvent('resize'));
+    });
   }
 }

angular/test/test-app/src/app/router-link-page/router-link-page.component.html

@@ -9,6 +9,7 @@
 
 <ion-content padding>
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
+  <p>canGoBack: <span id="canGoBack">{{canGoBack}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
   <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>

angular/test/test-app/src/app/router-link-page/router-link-page.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, NgZone } from '@angular/core';
+import { IonRouterOutlet } from '@ionic/angular';
 
 @Component({
   selector: 'app-router-link-page',
@@ -11,9 +12,15 @@ export class RouterLinkPageComponent implements OnInit {
   didEnter = 0;
   willLeave = 0;
   didLeave = 0;
+  canGoBack: boolean = null;
+
+  constructor(
+    private ionRouterOutlet: IonRouterOutlet
+  ) {}
 
   ngOnInit() {
     NgZone.assertInAngularZone();
+    this.canGoBack = this.ionRouterOutlet.canGoBack();
     this.onInit++;
   }
 
@@ -21,10 +28,16 @@ export class RouterLinkPageComponent implements OnInit {
     if (this.onInit !== 1) {
       throw new Error('ngOnInit was not called');
     }
+    if (this.canGoBack !== this.ionRouterOutlet.canGoBack()) {
+      throw new Error('canGoBack() changed');
+    }
     NgZone.assertInAngularZone();
     this.willEnter++;
   }
   ionViewDidEnter() {
+    if (this.canGoBack !== this.ionRouterOutlet.canGoBack()) {
+      throw new Error('canGoBack() changed');
+    }
     NgZone.assertInAngularZone();
     this.didEnter++;
   }

angular/test/test-app/src/app/router-link/router-link.component.html

@@ -11,6 +11,7 @@
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
   <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
   <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
+  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 
   <p>
     <ion-button routerLink="/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]</ion-button>
@@ -26,7 +27,7 @@
   <p><button (click)="navigateForward()" id="button-forward">navigateForward</button></p>
   <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
   <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
-  
+
   <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }" fragment="myDiv1">Query Params and Fragment</button></p>
-  
+
 </ion-content>

angular/test/test-app/src/app/router-link/router-link.component.ts

@@ -13,6 +13,7 @@ export class RouterLinkComponent implements OnInit {
   didEnter = 0;
   willLeave = 0;
   didLeave = 0;
+  changes = 0;
 
   constructor(
     private navCtrl: NavController,
@@ -35,6 +36,11 @@ export class RouterLinkComponent implements OnInit {
     this.navCtrl.navigateRoot('/router-link-page');
   }
 
+  counter() {
+    this.changes++;
+    return Math.floor(this.changes / 2);
+  }
+
   ngOnInit() {
     NgZone.assertInAngularZone();
     this.onInit++;

angular/test/test-app/src/app/slides/slides.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
 
 @Component({
@@ -6,7 +6,7 @@ import { IonSlides } from '@ionic/angular';
   templateUrl: './slides.component.html',
 })
 export class SlidesComponent implements AfterViewInit {
-  @ViewChild(IonSlides) slides: IonSlides;
+  @ViewChild(IonSlides, { static: true }) slides: IonSlides;
 
   slideIndex = 0;
   slideIndex2 = 0;

angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html

@@ -10,6 +10,6 @@
 <ion-content padding>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
-    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
   </p>
 </ion-content>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html

@@ -8,7 +8,7 @@
   <h1>LAZY LOADED TAB</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
-    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
 
   </p>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>Tab 1 - Page 2</ion-title>
+    <ion-title>Tab 1 - Page 2 ({{id}})</ion-title>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
     </ion-buttons>
@@ -8,9 +8,10 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Welcome to NESTED PAGE</h1>
+  <h1>Welcome to NESTED PAGE {{id}}</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/contact" id="goto-tab2-page1">Go to Tab 2 - Page 1</ion-button>
+    <ion-button routerLink="/tabs/account/nested/{{next()}}" id="goto-next">Go to Next</ion-button>
   </p>
 </ion-content>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -1,7 +1,21 @@
-import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-tabs-tab1-nested',
   templateUrl: './tabs-tab1-nested.component.html',
 })
-export class TabsTab1NestedComponent { }
+export class TabsTab1NestedComponent {
+  id = '';
+  constructor(
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit() {
+    this.id = this.route.snapshot.paramMap.get('id');
+  }
+
+  next() {
+    return parseInt(this.id, 10) + 1;
+  }
+}

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html

@@ -1,13 +1,13 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>Tab 1 - Page 1</ion-title>
+    <ion-title>{{title}}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content padding>
   <h1>Welcome to Tab1</h1>
   <p>
-    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Page 2</ion-button>
+    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
     <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
   </p>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -1,7 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 
 @Component({
   selector: 'app-tabs-tab1',
   templateUrl: './tabs-tab1.component.html',
 })
-export class TabsTab1Component { }
+export class TabsTab1Component {
+  title = 'ERROR';
+
+  ionViewWillEnter() {
+    NgZone.assertInAngularZone();
+    setTimeout(() => {
+      NgZone.assertInAngularZone();
+      this.title = 'Tab 1 - Page 1';
+    });
+  }
+}

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>Tab 2 - Page 1</ion-title>
+    <ion-title>{{title}}</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -8,7 +8,7 @@
   <h1>Welcome to Tab 2</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
-    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
     <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
   </p>
 </ion-content>

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.ts

@@ -1,7 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 
 @Component({
   selector: 'app-tabs-tab2',
   templateUrl: './tabs-tab2.component.html',
 })
-export class TabsTab2Component { }
+export class TabsTab2Component {
+  title = 'ERROR';
+
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    setTimeout(() => {
+      NgZone.assertInAngularZone();
+      this.title = 'Tab 2 - Page 1';
+    });
+  }
+}

angular/test/test-app/src/app/tabs/tabs.module.ts

@@ -0,0 +1,27 @@
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { TabsPageRoutingModule } from './tabs.router.module';
+import { TabsComponent } from './tabs.component';
+import { TabsTab1Component } from '../tabs-tab1/tabs-tab1.component';
+import { TabsTab2Component } from '../tabs-tab2/tabs-tab2.component';
+import { TabsTab1NestedComponent } from '../tabs-tab1-nested/tabs-tab1-nested.component';
+
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    TabsPageRoutingModule
+  ],
+  declarations: [
+    TabsComponent,
+    TabsTab1Component,
+    TabsTab2Component,
+    TabsTab1NestedComponent
+  ]
+})
+export class TabsPageModule {}

angular/test/test-app/src/app/tabs/tabs.router.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TabsComponent } from './tabs.component';
+import { TabsTab1NestedComponent } from '../tabs-tab1-nested/tabs-tab1-nested.component';
+import { TabsTab1Component } from '../tabs-tab1/tabs-tab1.component';
+import { TabsTab2Component } from '../tabs-tab2/tabs-tab2.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TabsComponent,
+    children: [
+      {
+        path: 'account',
+        children: [
+          {
+            path: 'nested/:id',
+            component: TabsTab1NestedComponent
+          },
+          {
+            path: '',
+            component: TabsTab1Component
+          }
+        ]
+      },
+      {
+        path: 'contact',
+        children: [
+          {
+            path: 'one',
+            component: TabsTab2Component
+          },
+          {
+            path: '',
+            redirectTo: 'one',
+            pathMatch: 'full'
+          }
+        ]
+      },
+      {
+        path: 'lazy',
+        loadChildren: () => import('../tabs-lazy/tabs-lazy.module').then(m => m.TabsLazyModule)
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TabsPageRoutingModule {}

angular/test/test-app/src/app/view-child/view-child.component.ts

@@ -7,11 +7,11 @@ import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular';
 })
 export class ViewChildComponent implements AfterViewInit {
 
-  @ViewChild(IonSlides) slides: IonSlides;
-  @ViewChild(IonButton) button: IonButton;
-  @ViewChild(IonTabs) tabs: IonTabs;
-  @ViewChild('div') div: ElementRef;
-  @ViewChild('slide') slide: IonSlide;
+  @ViewChild(IonSlides, { static: true }) slides: IonSlides;
+  @ViewChild(IonButton, { static: true }) button: IonButton;
+  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;
+  @ViewChild('div', { static: true }) div: ElementRef;
+  @ViewChild('slide', { static: true }) slide: IonSlide;
 
   ngAfterViewInit() {
     const loaded = !!(this.slides && this.button && this.tabs && this.div && this.slide);

angular/test/test-app/src/app/virtual-scroll/virtual-scroll.component.ts

@@ -8,7 +8,7 @@ import { IonVirtualScroll } from '@ionic/angular';
 })
 export class VirtualScrollComponent {
 
-  @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
+  @ViewChild(IonVirtualScroll, { static: true }) virtualScroll: IonVirtualScroll;
 
   items = Array.from({length: 100}, (_, i) => ({ name: `${i}`, checked: true}));
 

angular/test/test-app/src/browserslist

@@ -1,11 +0,0 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11

angular/test/test-app/src/main.server.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { ngExpressEngine } from '@nguniversal/express-engine';
+export { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

angular/test/test-app/src/main.ts

@@ -8,5 +8,8 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch(err => console.error(err));
+});