4.4.0

.circleci/config.yml

@@ -60,7 +60,7 @@ jobs:
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core
       - run:
-          command: npm run build -- --ci
+          command: npm run build -- --max-workers 1
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core-stencil
       - persist_to_workspace:
@@ -91,75 +91,6 @@ 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:
-            - "*"
-
-  build-react:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/packages/react
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - "*"
-
-  build-react-router:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm install
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link @ionic/react
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: npm run build
-          working_directory: /tmp/workspace/packages/react-router
-      - persist_to_workspace:
-          root: /tmp/workspace
-          paths:
-            - "*"
-
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -181,16 +112,6 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/core
 
-  test-core-e2e:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run test.e2e --ci
-          working_directory: /tmp/workspace/core
-
   test-core-spec:
     <<: *defaults
     steps:
@@ -198,7 +119,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.spec --ci
+          command: npm run test.spec
           working_directory: /tmp/workspace/core
 
   test-core-treeshake:
@@ -208,7 +129,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm run test.treeshake --ci
+          command: npm run test.treeshake
           working_directory: /tmp/workspace/core
 
   test-core-screenshot:
@@ -243,64 +164,6 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/angular
 
-  test-react-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/packages/react
-
-  test-react-router-lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run lint
-          working_directory: /tmp/workspace/packages/react-router
-
-  test-react-spec:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: npm run test.spec
-          working_directory: /tmp/workspace/packages/react
-
-  test-react-router-spec:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/core
-      - run:
-          command: sudo npm link @ionic/core
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link
-          working_directory: /tmp/workspace/packages/react
-      - run:
-          command: sudo npm link @ionic/react
-          working_directory: /tmp/workspace/packages/react-router
-      - run:
-          command: npm run test.spec
-          working_directory: /tmp/workspace/packages/react-router
-
   test-angular-e2e:
     <<: *defaults
     steps:
@@ -325,8 +188,6 @@ workflows:
           requires: [build-core]
       - test-core-lint:
           requires: [build-core]
-      - test-core-e2e:
-          requires: [build-core]
       - test-core-spec:
           requires: [build-core]
       - test-core-treeshake:
@@ -344,23 +205,7 @@ workflows:
 
       - build-angular:
           requires: [build-core]
-      - build-angular-server:
-          requires: [build-angular]
-      - build-react:
-          requires: [build-core]
-      - build-react-router:
-          requires: [build-core, build-react]
-      - test-react-lint:
-          requires: [build-react]
-      - test-react-router-lint:
-          requires: [build-react-router]
-      - test-react-spec:
-          requires: [build-react]
-      - test-react-router-spec:
-          requires: [build-react-router]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:
-          requires:
-            - build-angular
-            - build-angular-server
+          requires: [build-angular]

.github/COMPONENT-GUIDE.md

@@ -1,443 +0,0 @@
-# Ionic Component Implementation Guide
-
-- [Button States](#button-states)
-  * [Component Structure](#component-structure)
-  * [Activated](#activated)
-  * [Disabled](#disabled)
-  * [Focused](#focused)
-  * [Hover](#hover)
-  * [Ripple Effect](#ripple-effect)
-  * [Example Components](#example-components)
-  * [References](#references)
-- [Rendering Anchor or Button](#rendering-anchor-or-button)
-  * [Example Components](#example-components-1)
-  * [Component Structure](#component-structure-1)
-- [Converting Scoped to Shadow](#converting-scoped-to-shadow)
-
-## Button States
-
-Any component that renders a button should have the following states: [`activated`](#activated), [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design.
-
-### Component Structure
-
-#### JavaScript
-
-A component that renders a native button should use the following structure:
-
-```jsx
-<Host>
-  <button class="button-native">
-    <span class="button-inner">
-      <slot></slot>
-    </span>
-  </button>
-</Host>
-```
-
-Any other attributes and classes that are included are irrelevant to the button states, but it's important that this structure is followed and the classes above exist. In some cases they may be named something else that makes more sense, such as in item.
-
-
-#### CSS
-
-A mixin called `button-state()` has been added to make it easier to setup the states in each component.
-
-```scss
-@mixin button-state() {
-  @include position(0, 0, 0, 0);
-
-  position: absolute;
-
-  content: "";
-
-  opacity: 0;
-}
-```
-
-The following styles should be set for the CSS to work properly. Note that the `button-state()` mixin is included in the `::after` pseudo element of the native button.
-
-```scss
-.button-native {
-  /**
-   * All other CSS in this selector is irrelevant to button states
-   * but the following are required styles
-   */
-
-  position: relative;
-
-  overflow: hidden;
-}
-
-.button-native::after {
-  @include button-state();
-}
-
-.button-inner {
-  /**
-   * All other CSS in this selector is irrelevant to button states
-   * but the following are required styles
-   */
-
-  position: relative;
-
-  z-index: 1;
-}
-```
-
-
-### Activated
-
-The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
-
-> Make sure the component has the correct [component structure](#component-structure) before continuing.
-
-#### JavaScript
-
-The `ion-activatable` class needs to be set on an element that can be activated:
-
-```jsx
-render() {
-  return (
-    <Host class='ion-activatable'>
-      <slot></slot>
-    </Host>
-  );
-}
-```
-
-Once that is done, the element will get the `ion-activated` class added on press.
-
-In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
-
-```jsx
-<Host class='ion-activatable ion-activatable-instant'>
-```
-
-#### CSS
-
-```css
- /**
-   * @prop --color-activated: Color of the button when pressed
-   * @prop --background-activated: Background of the button when pressed
-   * @prop --background-activated-opacity: Opacity of the background when pressed
-   */
-```
-
-Style the `ion-activated` class based on the spec for that element:
-
-```scss
-:host(.ion-activated) .button-native {
-  color: var(--color-activated);
-
-  &::after {
-    background: var(--background-activated);
-
-    opacity: var(--background-activated-opacity);
-  }
-}
-```
-
-> Order is important! Activated should be before the focused & hover states.
-
-
-#### User Customization
-
-Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec.
-
-```css
-ion-button {
-  --background-activated: red;
-  --background-activated-opacity: 1;
-}
-```
-
-
-### Disabled
-
-The disabled state should be set via prop on all components that render a native button. Setting a disabled state will change the opacity or color of the button and remove click events from firing.
-
-#### JavaScript
-
-The `disabled` property should be set on the component:
-
-```jsx
-/**
-  * If `true`, the user cannot interact with the button.
-  */
-@Prop({ reflectToAttr: true }) disabled = false;
-```
-
-Then, the render function should add the [`aria-disabled`](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-disabled) role to the host, a class that is the element tag name followed by `disabled`, and pass the `disabled` attribute to the native button:
-
-```jsx
-render() {
-  const { disabled } = this;
-
-  return (
-    <Host
-      aria-disabled={disabled ? 'true' : null}
-      class={{
-        'button-disabled': disabled
-      }}
-    >
-      <button disabled={disabled}>
-        <slot></slot>
-      </button>
-    </Host>
-  );
-}
-```
-
-> Note: if the class being added was for `ion-back-button` it would be `back-button-disabled`.
-
-#### CSS
-
-The following CSS _at the bare minimum_ should be added for the disabled class, but it should be styled to match the spec:
-
-```css
-:host(.button-disabled) {
-  cursor: default;
-  opacity: .5;
-  pointer-events: none;
-}
-```
-
-#### User Customization
-
-TODO
-
-### Focused
-
-The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
-
-> Make sure the component has the correct [component structure](#component-structure) before continuing.
-
-#### JavaScript
-
-The `ion-focusable` class needs to be set on an element that can be focused:
-
-```jsx
-render() {
-  return (
-    <Host class='ion-focusable'>
-      <slot></slot>
-    </Host>
-  );
-}
-```
-
-Once that is done, the element will get the `ion-focused` class added when the element is tabbed to.
-
-#### CSS
-
-Components should be written to include the following focused variables for styling:
-
-```css
- /**
-   * @prop --color-focused: Color of the button when tabbed to with the keyboard
-   * @prop --background-focused: Background of the button when tabbed to with the keyboard
-   * @prop --background-focused-opacity: Opacity of the background when tabbed to with the keyboard
-   */
-```
-
-Style the `ion-focused` class based on the spec for that element:
-
-```scss
-:host(.ion-focused) .button-native {
-  color: var(--color-focused);
-
-  &::after {
-    background: var(--background-focused);
-
-    opacity: var(--background-focused-opacity);
-  }
-}
-```
-
-> Order is important! Focused should be after the activated and before the hover state.
-
-
-#### User Customization
-
-Setting the focused state on the `::after` pseudo-element allows the user to customize the focused state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on focus, or they can leave out `--background-focused-opacity` and the button will use the default focus opacity to match the spec.
-
-```css
-ion-button {
-  --background-focused: red;
-  --background-focused-opacity: 1;
-}
-```
-
-
-### Hover
-
-The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
-
-> Make sure the component has the correct [component structure](#component-structure) before continuing.
-
-#### CSS
-
-Components should be written to include the following hover variables for styling:
-
-```css
- /**
-   * @prop --color-hover: Color of the button on hover
-   * @prop --background-hover: Background of the button on hover
-   * @prop --background-hover-opacity: Opacity of the background on hover
-   */
-```
-
-Style the `:hover` based on the spec for that element:
-
-```scss
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    color: var(--color-hover);
-
-    &::after {
-      background: var(--background-hover);
-
-      opacity: var(--background-hover-opacity);
-    }
-  }
-}
-```
-
-> Order is important! Hover should be after the activated and focused states.
-
-
-#### User Customization
-
-Setting the hover state on the `::after` pseudo-element allows the user to customize the hover state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on hover, or they can leave out `--background-hover-opacity` and the button will use the default hover opacity to match the spec.
-
-```css
-ion-button {
-  --background-hover: red;
-  --background-hover-opacity: 1;
-}
-```
-
-
-### Ripple Effect
-
-The ripple effect should be added to elements for Material Design. It *requires* the `ion-activatable` class to be set on the parent element to work, and relative positioning on the parent.
-
-```jsx
- render() {
-  const mode = getIonMode(this);
-
-return (
-  <Host
-    class={{
-      'ion-activatable': true,
-    }}
-  >
-    <button>
-      <slot></slot>
-      {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
-    </button>
-  </Host>
-);
-```
-
-The ripple effect can also accept a different `type`. By default it is `"bounded"` which will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`. An unbounded ripple will exceed the container, so add `overflow: hidden` to the parent to prevent this.
-
-Make sure to style the ripple effect for that component to accept a color:
-
-```css
-ion-ripple-effect {
-  color: var(--ripple-color);
-}
-```
-
-
-### Example Components
-
-- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
-- [ion-back-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/back-button)
-- [ion-menu-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu-button)
-
-### References
-
-- [Material Design States](https://material.io/design/interaction/states.html)
-- [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)
-
-
-## Rendering Anchor or Button
-
-Certain components can render an `<a>` or a `<button>` depending on the presence of an `href` attribute.
-
-### Example Components
-
-- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
-- [ion-card](https://github.com/ionic-team/ionic/tree/master/core/src/components/card)
-- [ion-fab-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/fab-button)
-- [ion-item-option](https://github.com/ionic-team/ionic/tree/master/core/src/components/item-option)
-- [ion-item](https://github.com/ionic-team/ionic/tree/master/core/src/components/item)
-
-### Component Structure
-
-#### JavaScript
-
-In order to implement a component with a dynamic tag type, set the property that it uses to switch between them, we use `href`:
-
-```jsx
-/**
- * Contains a URL or a URL fragment that the hyperlink points to.
- * If this property is set, an anchor tag will be rendered.
- */
-@Prop() href: string | undefined;
-```
-
-Then use that in order to render the tag:
-
-```jsx
-render() {
-  const TagType = href === undefined ? 'button' : 'a' as any;
-
-  return (
-    <Host>
-      <TagType>
-        <slot></slot>
-      </TagType>
-    </Host>
-  );
-}
-```
-
-If the component can render an `<a>`, `<button>` or a `<div>` add in more properties such as a `button` attribute in order to check if it should render a button.
-
-## Converting Scoped to Shadow
-
-### CSS
-
-There will be some CSS issues when converting to shadow. Below are some of the differences.
-
-**Targeting host + slotted child**
-
-```css
-/* IN SCOPED */
-:host(.ion-color)::slotted(ion-segment-button)
-
-/* IN SHADOW*/
-:host(.ion-color) ::slotted(ion-segment-button)
-```
-
-**Targeting host-context + host (with a :not)**
-
-```css
-/* IN SCOPED */
-:host-context(ion-toolbar.ion-color):not(.ion-color) {
-
-/* IN SHADOW */
-:host-context(ion-toolbar.ion-color):host(:not(.ion-color))  {
-```
-
-**Targeting host-context + host (with a :not) > slotted child**
-
-```css
-/* IN SCOPED */
-:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
-
-/* IN SHADOW*/
-:host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
-```

.github/CONTRIBUTING.md

@@ -2,31 +2,6 @@
 
 Thanks for your interest in contributing to the Ionic Framework! :tada:
 
-- [Contributing Etiquette](#contributing-etiquette)
-- [Creating an Issue](#creating-an-issue)
-  * [Creating a Good Code Reproduction](#creating-a-good-code-reproduction)
-- [Creating a Pull Request](#creating-a-pull-request)
-  * [Setup](#setup)
-  * [Core](#core)
-    + [Modifying Components](#modifying-components)
-    + [Preview Changes](#preview-changes)
-    + [Lint Changes](#lint-changes)
-    + [Modifying Documentation](#modifying-documentation)
-    + [Modifying Tests](#modifying-tests)
-      - [Screenshot Tests](#screenshot-tests)
-    + [Building Changes](#building-changes)
-  * [Submit Pull Request](#submit-pull-request)
-- [Commit Message Guidelines](#commit-message-guidelines)
-  * [Commit Message Format](#commit-message-format)
-  * [Revert](#revert)
-  * [Type](#type)
-  * [Scope](#scope)
-  * [Subject](#subject)
-  * [Body](#body)
-  * [Footer](#footer)
-  * [Examples](#examples)
-- [License](#license)
-
 
 ## Contributing Etiquette
 
@@ -41,40 +16,13 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
 
 * The issue list of this repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.
 
-* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 14 days, it will be closed.
+* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 30 days, it will be closed.
 
 * If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
 
 * Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
 
 
-## Creating a Good Code Reproduction
-
-### What is a Code Reproduction?
-
-A code reproduction is a small application that is built to demonstrate a particular issue. The code reproduction should contain the minimum amount of code needed to recreate the issue and should focus on a single issue.
-
-### Why Should You Create a Reproduction?
-
-A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed! 
-
-Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. In other words, creating a code reproduction of the issue helps us help you.
-
-### How to Create a Reproduction
-
-* Create a new Ionic application using one of our starter templates. The `blank` starter application is a great choice for this. You can create one using the following Ionic CLI command: `ionic start myApp blank`
-* Add the minimum amount of code needed to recreate the issue you are experiencing. Do not include anything that is not required to reproduce the issue. This includes any 3rd party plugins you have installed.
-* Publish the application on GitHub and include a link to it when [creating an issue](#creating-an-issue).
-* Be sure to include steps to reproduce the issue. These steps should be clear and easy to follow.
-
-### Benefits of Creating a Reproduction
-
-* **Uses the latest version of Ionic:** By creating a new Ionic application, you are ensuring that you are testing against the latest version of the framework. Sometimes the issues you are experiencing have already been resolved in a newer version of the framework!
-* **Minimal surface area:** By removing code that is not needed in order to reproduce the issue, it makes it easier to identify the cause of the issue.
-* **No secret code needed:** Creating a minimal reproduction of the issue prevents you from having to publish any proprietary code used in your project.
-* **Get help fixing the issue:** If we can reliably reproduce an issue, there is a good chance we will be able to address it.
-
-
 ## Creating a Pull Request
 
 * We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
@@ -168,32 +116,13 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
 
 
-## Commit Message Guidelines
+## Commit Message Format
 
-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
 
-### Commit Message Format
-
-We follow the [Conventional Commits specification](https://www.conventionalcommits.org/). A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
-
-```
-<type>(<scope>): <subject>
-<BLANK LINE>
-<body>
-<BLANK LINE>
-<footer>
-```
-
-The **header** is mandatory and the **scope** of the header is optional.
-
-### Revert
-
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-### Type
-
-If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+`type(scope): subject`
 
+#### Type
 Must be one of the following:
 
 * **feat**: A new feature
@@ -205,12 +134,10 @@ Must be one of the following:
 * **test**: Adding missing tests
 * **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
 
-### Scope
-
-The scope can be anything specifying place of the commit change. Usually it will refer to a component but it can also refer to a utility. For example `action-sheet`, `button`, `css`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation. As a general rule, if you're modifying a component use the name of the folder.
-
-### Subject
+#### Scope
+The scope can be anything specifying place of the commit change. For example `action-sheet`, `button`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation.
 
+#### Subject
 The subject contains succinct description of the change:
 
 * use the imperative, present tense: "change" not "changed" nor "changes"
@@ -220,66 +147,6 @@ The subject contains succinct description of the change:
 * describe what the commit does, not what issue it relates to or fixes
 * **be brief, yet descriptive** - we should have a good understanding of what the commit does by reading the subject
 
-### Body
-
-Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
-The body should include the motivation for the change and contrast this with previous behavior.
-
-### Footer
-
-The footer should contain any information about **Breaking Changes** and is also the place to
-reference GitHub issues that this commit **Closes**.
-
-**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
-
-### Examples
-
-Does not appear in the generated changelog:
-
-```
-docs(changelog): update steps to update
-```
-
-Appears under "Features" header, toast subheader:
-
-```
-feat(toast): add 'buttons' property
-```
-
-Appears under "Bug Fixes" header, skeleton-text subheader, with a link to issue #28:
-
-```
-fix(skeleton-text): use proper color when animated
-
-closes #28
-```
-
-Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
-
-```
-perf(css): remove all css utility attributes
-
-BREAKING CHANGE: The CSS utility attributes have been removed. Use CSS classes instead.
-```
-
-Appears under "Breaking Changes" with the breaking change explanation:
-
-```
-refactor(animations): update to new animation system
-
-BREAKING CHANGE:
-
-Removes the old animation system to use the new Ionic animations.
-```
-
-The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
-
-```
-revert: feat(skeleton-text): add animated property
-
-This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
-```
-
 
 ## License
 

.github/ISSUE_TEMPLATE.md

@@ -10,7 +10,6 @@
 <!-- (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) -->
 <!-- (For Ionic 2.x & 3.x issues, please use https://github.com/ionic-team/ionic-v3) -->
 [x] **4.x**
-[ ] **5.x**
 
 **I'm submitting a ...** 
 <!--  (check one with "x") -->

.github/ISSUE_TEMPLATE/bug_report.md

@@ -37,7 +37,6 @@ 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 to 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 top 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,11 +221,9 @@ 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.5.0`.
+1. Create the release branch from `master`, for example: `release-4.1.0`.
 
-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. Submit a pull request from the release branch into `stable`. 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.
 
@@ -237,10 +235,7 @@ 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))
-    - 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. *(Optional)* Run `npm run release -- --dry-run` to run the release without publishing and verify the version.
+    - Commit these changes with the version number as the message, e.g. `git commit -m "4.1.0"`
 
 1. Run `npm run release`
 
@@ -248,6 +243,10 @@ 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-[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. 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. 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.
+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.

.github/ionic-issue-bot.yml

@@ -21,16 +21,6 @@ comment:
 
 
         Thank you!
-    - label: "ionitron: needs reproduction"
-      message: >
-        Thanks for the issue! This issue has been labeled as `needs reproduction`. This label
-        is added to issues that need a code reproduction.
-
-
-        Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
-
-
-        For a guide on how to create a good reproduction, see our [Contributing Guide](https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction).
   dryRun: false
 
 closeAndLock:
@@ -75,10 +65,8 @@ stale:
   days: 365
   maxIssuesPerRun: 100
   exemptLabels:
-    - "good first issue"
-    - "triage"
-    - "type: bug"
-    - "type: feature request"
+    - good first issue
+    - triage
   exemptAssigned: true
   exemptProjects: true
   exemptMilestones: true
@@ -95,7 +83,7 @@ stale:
   dryRun: false
 
 noReply:
-  days: 14
+  days: 30
   maxIssuesPerRun: 100
   label: "needs: reply"
   responseLabel: triage
@@ -107,24 +95,6 @@ noReply:
     template is fully filled out.
 
 
-    Thank you for using Ionic!
-  close: true
-  lock: true
-  dryRun: false
-
-noReproduction:
-  days: 14
-  maxIssuesPerRun: 100
-  label: "ionitron: needs reproduction"
-  responseLabel: triage
-  exemptProjects: true
-  exemptMilestones: true
-  message: >
-    Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still
-    an issue with the latest version of Ionic, please create a new issue and ensure the
-    template is fully filled out.
-
-
     Thank you for using Ionic!
   close: true
   lock: true

.gitignore

@@ -15,7 +15,6 @@ log.txt
 coverage/
 collection/
 dist/
-dist-transpiled/
 node_modules/
 tmp/
 temp/
@@ -50,17 +49,10 @@ 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/
-packages/react/css/
 core/css/
-core/hydrate/
 core/loader/
-core/www/
 .stencil/
 angular/build/

.scripts/common.js

@@ -1,10 +1,9 @@
 const fs = require('fs-extra');
 const path = require('path');
 const execa = require('execa');
-const inquirer = require('inquirer');
 const Listr = require('listr');
 const semver = require('semver');
-const { bold, cyan, dim } = require('colorette');
+const tc = require('turbocolor');
 
 const rootDir = path.join(__dirname, '../');
 
@@ -12,9 +11,6 @@ const packages = [
   'core',
   'docs',
   'angular',
-  'packages/react',
-  'packages/react-router',
-  'packages/angular-server'
 ];
 
 function readPkg(project) {
@@ -36,80 +32,38 @@ function projectPath(project) {
   return path.join(rootDir, project);
 }
 
-async function askNpmTag(version) {
-  const prompts = [
-    {
-      type: 'list',
-      name: 'npmTag',
-      message: 'Select npm tag or specify a new tag',
-      choices: ['latest', 'next', 'v4-lts']
-        .concat([
-          new inquirer.Separator(),
-          {
-            name: 'Other (specify)',
-            value: null
-          }
-        ])
-    },
-    {
-      type: 'confirm',
-      name: 'confirm',
-      message: answers => {
-        return `Will publish ${cyan(version)} to ${cyan(answers.npmTag)}. Continue?`;
-      }
-    }
-  ];
-
-  const { npmTag, confirm } = await inquirer.prompt(prompts);
-  return { npmTag, confirm };
-}
-
 function checkGit(tasks) {
   tasks.push(
     {
       title: 'Check current branch',
-      task: () =>
-        execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']).then(branch => {
-          if (branch.indexOf('release') === -1 && branch.indexOf('hotfix') === -1) {
-            throw new Error(`Must be on a "release" or "hotfix" branch.`);
-          }
-        })
+      task: () => execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']).then(branch => {
+        if (branch.indexOf('release') === -1 && branch.indexOf('hotfix') === -1) {
+          throw new Error(`Must be on a "release" or "hotfix" branch.`);
+        }
+      })
     },
     {
       title: 'Check local working tree',
-      task: () =>
-        execa.stdout('git', ['status', '--porcelain']).then(status => {
-          if (status !== '') {
-            throw new Error(`Unclean working tree. Commit or stash changes first.`);
-          }
-        })
+      task: () => execa.stdout('git', ['status', '--porcelain']).then(status => {
+        if (status !== '') {
+          throw new Error(`Unclean working tree. Commit or stash changes first.`);
+        }
+      })
     },
     {
       title: 'Check remote history',
-      task: () =>
-        execa.stdout('git', ['rev-list', '--count', '--left-only', '@{u}...HEAD']).then(result => {
-          if (result !== '0') {
-            throw new Error(`Remote history differs. Please pull changes.`);
-          }
-        })
+      task: () => execa.stdout('git', ['rev-list', '--count', '--left-only', '@{u}...HEAD']).then(result => {
+        if (result !== '0') {
+          throw new Error(`Remote history differs. Please pull changes.`);
+        }
+      })
     }
   );
 }
 
-function checkTestDist(tasks) {
-  tasks.push({
-    title: 'Check dist folders for required files',
-    task: () =>
-      execa.stdout('node', ['.scripts/test-dist.js']).then(status => {
-        if (status.indexOf('✅ test.dist') === -1) {
-          throw new Error(`Test Dist did not find some required files`);
-        }
-      })
-  });
-}
-
 const isValidVersion = input => Boolean(semver.valid(input));
 
+
 function preparePackage(tasks, package, version, install) {
   const projectRoot = projectPath(package);
   const pkg = readPkg(package);
@@ -120,9 +74,7 @@ function preparePackage(tasks, package, version, install) {
       title: `${pkg.name}: validate new version`,
       task: () => {
         if (!isVersionGreater(pkg.version, version)) {
-          throw new Error(
-            `New version \`${version}\` should be higher than current version \`${pkg.version}\``
-          );
+          throw new Error(`New version \`${version}\` should be higher than current version \`${pkg.version}\``);
         }
       }
     });
@@ -130,7 +82,7 @@ function preparePackage(tasks, package, version, install) {
       projectTasks.push({
         title: `${pkg.name}: install npm dependencies`,
         task: async () => {
-          await fs.remove(path.join(projectRoot, 'node_modules'));
+          await fs.remove(path.join(projectRoot, 'node_modules'))
           await execa('npm', ['i'], { cwd: projectRoot });
         }
       });
@@ -143,60 +95,46 @@ function preparePackage(tasks, package, version, install) {
         title: `${pkg.name}: npm link @ionic/core`,
         task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
       });
-
-      if (package === 'packages/react-router') {
-        projectTasks.push({
-          title: `${pkg.name}: npm link @ionic/react`,
-          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
-        });
-      }
     }
 
-    // Lint, Test, Bump Core dependency
     if (version) {
       projectTasks.push({
         title: `${pkg.name}: lint`,
         task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot })
       });
-      // TODO will not work due to https://github.com/ionic-team/ionic/issues/20136
-      // projectTasks.push({
-      //   title: `${pkg.name}: test`,
-      //   task: async () => await execa('npm', ['test'], { cwd: projectRoot })
-      // });
+      projectTasks.push({
+        title: `${pkg.name}: update ionic/core dep to ${version}`,
+        task: () => {
+          updateDependency(pkg, "@ionic/core", version);
+          writePkg(package, pkg);
+        }
+      });
+      projectTasks.push({
+        title: `${pkg.name}: test`,
+        task: () => execa('npm', ['test'], { cwd: projectRoot })
+      });
     }
 
-    // Build
     projectTasks.push({
       title: `${pkg.name}: build`,
       task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
     });
-
-    // Link core or react for sub projects
-    if (package === 'core' || package === 'packages/react') {
+    if (package === 'core') {
       projectTasks.push({
         title: `${pkg.name}: npm link`,
         task: () => execa('npm', ['link'], { cwd: projectRoot })
       });
     }
-
-    if (version) {
-      projectTasks.push({
-        title: `${pkg.name}: update ionic/core dep to ${version}`,
-        task: () => {
-          updateDependency(pkg, '@ionic/core', version);
-          writePkg(package, pkg);
-        }
-      });
-    }
   }
 
   // Add project tasks
   tasks.push({
-    title: `Prepare ${bold(pkg.name)}`,
+    title: `Prepare ${tc.bold(pkg.name)}`,
     task: () => new Listr(projectTasks)
   });
 }
 
+
 function prepareDevPackage(tasks, package, version) {
   const projectRoot = projectPath(package);
   const pkg = readPkg(package);
@@ -214,7 +152,7 @@ function prepareDevPackage(tasks, package, version) {
     projectTasks.push({
       title: `${pkg.name}: update ionic/core dep to ${version}`,
       task: () => {
-        updateDependency(pkg, '@ionic/core', version);
+        updateDependency(pkg, "@ionic/core", version);
         writePkg(package, pkg);
       }
     });
@@ -224,7 +162,7 @@ function prepareDevPackage(tasks, package, version) {
       task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
     });
 
-    if (package === 'core' || package === 'packages/react') {
+    if (package === 'core') {
       projectTasks.push({
         title: `${pkg.name}: npm link`,
         task: () => execa('npm', ['link'], { cwd: projectRoot })
@@ -234,7 +172,7 @@ function prepareDevPackage(tasks, package, version) {
 
   // Add project tasks
   tasks.push({
-    title: `Prepare dev build: ${bold(pkg.name)}`,
+    title: `Prepare dev build: ${tc.bold(pkg.name)}`,
     task: () => new Listr(projectTasks)
   });
 }
@@ -243,74 +181,36 @@ function updatePackageVersions(tasks, packages, version) {
   packages.forEach(package => {
     updatePackageVersion(tasks, package, version);
 
-    tasks.push({
-      title: `${package} update @ionic/core dependency, if present ${dim(`(${version})`)}`,
-      task: async () => {
-        if (package !== 'core') {
-          const pkg = readPkg(package);
-          updateDependency(pkg, '@ionic/core', version);
-          writePkg(package, pkg);
-        }
+    tasks.push(
+      {
+        title: `${package} update @ionic/core dependency, if present ${tc.dim(`(${version})`)}`,
+        task: async () => {
+          if (package !== 'core') {
+            const pkg = readPkg(package);
+            updateDependency(pkg, '@ionic/core', version);
+            writePkg(package, pkg);
+          }
+        },
       }
-    });
-
-    // angular & angular-server need to update their dist versions
-    if (package === 'angular' || package === 'packages/angular-server') {
-      const distPackage = path.join(package, 'dist');
-
-      updatePackageVersion(tasks, distPackage, version);
-
-      tasks.push({
-        title: `${package} update @ionic/core dependency, if present ${dim(`(${version})`)}`,
-        task: async () => {
-          const pkg = readPkg(distPackage);
-          updateDependency(pkg, '@ionic/core', version);
-          writePkg(distPackage, pkg);
-        }
-      });
-    }
-
-    if (package === 'packages/react-router') {
-      tasks.push({
-        title: `${package} update @ionic/react dependency, if present ${dim(`(${version})`)}`,
-        task: async () => {
-          const pkg = readPkg(package);
-          updateDependency(pkg, '@ionic/react', version);
-          writePkg(package, pkg);
-        }
-      });
-    }
+    )
   });
 }
 
+
 function updatePackageVersion(tasks, package, version) {
   const projectRoot = projectPath(package);
 
-  tasks.push({
-    title: `${package}: update package.json ${dim(`(${version})`)}`,
-    task: async () => {
-      await execa('npm', ['version', version], { cwd: projectRoot });
+  tasks.push(
+    {
+      title: `${package}: update package.json ${tc.dim(`(${version})`)}`,
+      task: async () => {
+        await execa('npm', ['version', version], { cwd: projectRoot });
+      }
     }
-  });
+  );
 }
 
-function copyPackageToDist(tasks, packages) {
-  packages.forEach(package => {
-    const projectRoot = projectPath(package);
-
-    // angular and angular-server are the only packages that publish dist
-    if (package !== 'angular' && package !== 'packages/angular-server') {
-      return;
-    }
-
-    tasks.push({
-      title: `${package}: Copy package.json to dist`,
-      task: () => execa('node', ['copy-package.js', package], { cwd: path.join(rootDir, '.scripts') })
-    });
-  });
-}
-
-function publishPackages(tasks, packages, version, npmTag = 'latest') {
+function publishPackages(tasks, packages, version, tag = 'latest') {
   // first verify version
   packages.forEach(package => {
     if (package === 'core') {
@@ -329,19 +229,15 @@ function publishPackages(tasks, packages, version, npmTag = 'latest') {
     });
   });
 
-  // Publish
+  // next publish
   packages.forEach(package => {
-    let projectRoot = projectPath(package);
-
-    if (package === 'packages/angular-server' || package === 'angular') {
-      projectRoot = path.join(projectRoot, 'dist')
-    }
+    const projectRoot = projectPath(package);
 
     tasks.push({
-      title: `${package}: publish to ${npmTag} tag`,
+      title: `${package}: publish to ${tag} tag`,
       task: async () => {
-        await execa('npm', ['publish', '--tag', npmTag], { cwd: projectRoot });
-      }
+        await execa('npm', ['publish', '--tag', tag], { cwd: projectRoot });
+      },
     });
   });
 }
@@ -353,9 +249,6 @@ function updateDependency(pkg, dependency, version) {
   if (pkg.devDependencies && pkg.devDependencies[dependency]) {
     pkg.devDependencies[dependency] = version;
   }
-  if (pkg.peerDependencies && pkg.peerDependencies[dependency]) {
-    pkg.peerDependencies[dependency] = version;
-  }
 }
 
 function isVersionGreater(oldVersion, newVersion) {
@@ -365,21 +258,11 @@ 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 = {
-  checkTestDist,
   checkGit,
-  askNpmTag,
   isValidVersion,
   isVersionGreater,
-  copyCDNLoader,
-  copyPackageToDist,
   packages,
   packagePath,
   prepareDevPackage,
@@ -391,5 +274,5 @@ module.exports = {
   updateDependency,
   updatePackageVersion,
   updatePackageVersions,
-  writePkg
+  writePkg,
 };

.scripts/prepare.js

@@ -2,7 +2,7 @@
  * Deploy script adopted from https://github.com/sindresorhus/np
  * MIT License (c) Sindre Sorhus (sindresorhus.com)
  */
-const { cyan, dim, red, reset } = require('colorette');
+const tc = require('turbocolor');
 const execa = require('execa');
 const inquirer = require('inquirer');
 const Listr = require('listr');
@@ -17,13 +17,9 @@ async function main() {
       throw new Error('env.GH_TOKEN is undefined');
     }
 
-    const { version, confirm } = await askVersion();
+    const version = await askVersion();
     const install = process.argv.indexOf('--no-install') < 0;
 
-    if (!confirm) {
-      return;
-    }
-
     // compile and verify packages
     await preparePackages(common.packages, version, install);
 
@@ -34,7 +30,7 @@ async function main() {
     console.log(`  npm run release\n`);
 
   } catch(err) {
-    console.log('\n', red(err), '\n');
+    console.log('\n', tc.red(err), '\n');
     process.exit(1);
   }
 }
@@ -84,13 +80,13 @@ async function askVersion() {
       type: 'confirm',
       name: 'confirm',
       message: answers => {
-        return `Will bump from ${cyan(oldVersion)} to ${cyan(answers.version)}. Continue?`;
+        return `Will bump from ${tc.cyan(oldVersion)} to ${tc.cyan(answers.version)}. Continue?`;
       }
     }
   ];
 
-  const { version, confirm } = await inquirer.prompt(prompts);
-  return { version, confirm };
+  const {version} = await inquirer.prompt(prompts);
+  return version;
 }
 
 
@@ -111,17 +107,15 @@ async function preparePackages(packages, version, install) {
   });
 
   // add update package.json of each project
-  common.updatePackageVersions(tasks, packages, version);
+  packages.forEach(package => {
+    common.updatePackageVersion(tasks, package, version);
+  });
 
   // generate changelog
   generateChangeLog(tasks);
 
-  // check dist folders
-  common.checkTestDist(tasks);
-
   // update core readme with version number
   updateCoreReadme(tasks, version);
-  common.copyCDNLoader(tasks, version);
 
   const listr = new Listr(tasks, { showSubtasks: true });
   await listr.run();
@@ -131,7 +125,7 @@ async function preparePackages(packages, version, install) {
 function validateGit(tasks, version) {
   tasks.push(
     {
-      title: `Validate git tag ${dim(`(v${version})`)}`,
+      title: `Validate git tag ${tc.dim(`(v${version})`)}`,
       task: () => execa('git', ['fetch'])
         .then(() => {
           return execa.stdout('npm', ['config', 'get', 'tag-version-prefix']);
@@ -177,6 +171,7 @@ function updateCoreReadme(tasks, version) {
   });
 }
 
+
 const SEMVER_INCREMENTS = ['patch', 'minor', 'major'];
 
 const isValidVersionInput = input => SEMVER_INCREMENTS.indexOf(input) !== -1 || common.isValidVersion(input);
@@ -198,17 +193,17 @@ function prettyVersionDiff(oldVersion, inc) {
 
   for (let i = 0; i < newVersion.length; i++) {
     if ((newVersion[i] !== oldVersion[i] && !firstVersionChange)) {
-      output.push(`${dim(cyan(newVersion[i]))}`);
+      output.push(`${tc.dim.cyan(newVersion[i])}`);
       firstVersionChange = true;
     } else if (newVersion[i].indexOf('-') >= 1) {
       let preVersion = [];
       preVersion = newVersion[i].split('-');
-      output.push(`${dim(cyan(`${preVersion[0]}-${preVersion[1]}`))}`);
+      output.push(`${tc.dim.cyan(`${preVersion[0]}-${preVersion[1]}`)}`);
     } else {
-      output.push(reset(dim(newVersion[i])));
+      output.push(tc.reset.dim(newVersion[i]));
     }
   }
-  return output.join(reset(dim('.')));
+  return output.join(tc.reset.dim('.'));
 }
 
 main();

.scripts/release-dev.js

@@ -1,4 +1,4 @@
-const { cyan, red } = require('colorette');
+const tc = require('turbocolor');
 const semver = require('semver');
 const execa = require('execa');
 const inquirer = require('inquirer');
@@ -7,7 +7,6 @@ const fs = require('fs-extra');
 
 const common = require('./common');
 
-const DIST_NPM_TAG = 'dev';
 const DIST_TAG = 'dev';
 
 async function main() {
@@ -38,8 +37,7 @@ async function main() {
     packages.forEach(package => {
       common.prepareDevPackage(tasks, package, devVersion);
     });
-    common.copyCDNLoader(tasks, devVersion);
-    common.publishPackages(tasks, packages, devVersion, DIST_NPM_TAG);
+    common.publishPackages(tasks, packages, devVersion, DIST_TAG);
 
     const listr = new Listr(tasks);
     await listr.run();
@@ -47,7 +45,7 @@ async function main() {
     console.log(`\nionic ${devVersion} published!! 🎉\n`);
 
   } catch (err) {
-    console.log('\n', red(err), '\n');
+    console.log('\n', tc.red(err), '\n');
     process.exit(1);
   }
 
@@ -64,7 +62,7 @@ async function askDevVersion(devVersion) {
       name: 'confirm',
       value: true,
       message: () => {
-        return `Publish the dev build ${cyan(devVersion)}?`;
+        return `Publish the dev build ${tc.cyan(devVersion)}?`;
       }
     }
   ];

.scripts/release.js

@@ -2,25 +2,20 @@
  * Deploy script adopted from https://github.com/sindresorhus/np
  * MIT License (c) Sindre Sorhus (sindresorhus.com)
  */
-const { cyan, dim, green, red, yellow } = require('colorette');
+const tc = require('turbocolor');
 const execa = require('execa');
 const Listr = require('listr');
-const path = require('path');
-const { Octokit } = require('@octokit/rest');
+const octokit = require('@octokit/rest')()
 const common = require('./common');
 const fs = require('fs-extra');
 
 
 async function main() {
   try {
-    const dryRun = process.argv.indexOf('--dry-run') > -1;
-
     if (!process.env.GH_TOKEN) {
       throw new Error('env.GH_TOKEN is undefined');
     }
 
-    checkProductionRelease();
-
     const tasks = [];
     const { version } = common.readPkg('core');
     const changelog = findChangelog();
@@ -28,55 +23,30 @@ async function main() {
     // repo must be clean
     common.checkGit(tasks);
 
-    const { npmTag, confirm } = await common.askNpmTag(version);
+    // publish each package in NPM
+    common.publishPackages(tasks, common.packages, version);
 
-    if (!confirm) {
-      return;
-    }
-
-    if(!dryRun) {
-      // publish each package in NPM
-      common.publishPackages(tasks, common.packages, version, npmTag);
-
-      // push tag to git remote
-      publishGit(tasks, version, changelog, npmTag);
-    }
+    // push tag to git remote
+    publishGit(tasks, version, changelog);
 
     const listr = new Listr(tasks);
     await listr.run();
-
-    // Dry run doesn't publish to npm or git
-    if (dryRun) {
-      console.log(`
-        \n${yellow('Did not publish. Remove the "--dry-run" flag to publish:')}\n${green(version)} to ${cyan(npmTag)}\n
-      `);
-    } else {
-      console.log(`\nionic ${version} published to ${npmTag}!! 🎉\n`);
-    }
+    console.log(`\nionic ${version} published!! 🎉\n`);
 
   } catch (err) {
-    console.log('\n', red(err), '\n');
+    console.log('\n', tc.red(err), '\n');
     process.exit(1);
   }
 }
 
-function checkProductionRelease() {
-  const corePath = common.projectPath('core');
-  const hasEsm = fs.existsSync(path.join(corePath, 'dist', 'esm'));
-  const hasEsmEs5 = fs.existsSync(path.join(corePath, 'dist', 'esm-es5'));
-  const hasCjs = fs.existsSync(path.join(corePath, 'dist', 'cjs'));
-  if (!hasEsm || !hasEsmEs5 || !hasCjs) {
-    throw new Error('core build is not a production build');
-  }
-}
 
-function publishGit(tasks, version, changelog, npmTag) {
-  const gitTag = `v${version}`;
+function publishGit(tasks, version, changelog) {
+  const tag = `v${version}`;
 
   tasks.push(
     {
-      title: `Tag latest commit ${dim(`(${gitTag})`)}`,
-      task: () => execa('git', ['tag', `${gitTag}`], { cwd: common.rootDir })
+      title: `Tag latest commit ${tc.dim(`(${tag})`)}`,
+      task: () => execa('git', ['tag', `${tag}`], { cwd: common.rootDir })
     },
     {
       title: 'Push branches to remote',
@@ -84,11 +54,11 @@ function publishGit(tasks, version, changelog, npmTag) {
     },
     {
       title: 'Push tags to remove',
-      task: () => execa('git', ['push', '--follow-tags'], { cwd: common.rootDir })
+      task: () => execa('git', ['push', '--tags'], { cwd: common.rootDir })
     },
     {
       title: 'Publish Github release',
-      task: () => publishGithub(version, gitTag, changelog, npmTag)
+      task: () => publishGithub(version, tag, changelog)
     }
   );
 }
@@ -100,7 +70,7 @@ function findChangelog() {
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
-    if (line.startsWith('## [') || line.startsWith('# [')) {
+    if (line.startsWith('# [')) {
       if (start === -1) {
         start = i + 1;
       } else {
@@ -116,28 +86,19 @@ function findChangelog() {
   return lines.slice(start, end).join('\n').trim();
 }
 
-async function publishGithub(version, gitTag, changelog, npmTag) {
-  // If the npm tag is next then publish as a prerelease
-  const prerelease = npmTag === 'next' ? true : false;
-
-  const octokit = new Octokit({
-    auth: process.env.GH_TOKEN
+async function publishGithub(version, tag, changelog) {
+  octokit.authenticate({
+    type: 'oauth',
+    token: process.env.GH_TOKEN
   });
 
-  let branch = await execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']);
-
-  if (!branch) {
-    branch = 'master';
-  }
-
   await octokit.repos.createRelease({
     owner: 'ionic-team',
     repo: 'ionic',
-    target_commitish: branch,
-    tag_name: gitTag,
+    target_commitish: 'master',
+    tag_name: tag,
     name: version,
     body: changelog,
-    prerelease: prerelease
   });
 }
 

.scripts/test-dist.js

@@ -1,97 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-
-// Test dist build:
-// Double-triple check all the packages
-// and files are good to go before publishing
-[
-  // core
-  {
-    files: ['../core/dist/index.js', '../core/dist/ionic/index.esm.js']
-  },
-  // angular
-  {
-    files: [
-      '../angular/dist/schematics/collection.json',
-      '../angular/dist/fesm5/ionic-angular.js',
-      '../angular/dist/fesm2015/ionic-angular.js',
-      '../angular/dist/ionic-angular.d.ts',
-      '../angular/dist/ionic-angular.metadata.json'
-    ]
-  },
-  // angular-server
-  {
-    files: [
-      '../packages/angular-server/dist/fesm5/ionic-angular-server.js',
-      '../packages/angular-server/dist/fesm2015/ionic-angular-server.js',
-      '../packages/angular-server/dist/ionic-angular-server.d.ts',
-      '../packages/angular-server/dist/ionic-angular-server.metadata.json'
-    ]
-  },
-  // react
-  {
-    files: ['../packages/react/dist/index.js']
-  },
-  // react-router
-  {
-    files: ['../packages/react-router/dist/index.js']
-  }
-].forEach(testPackage);
-
-function testPackage(testPkg) {
-  if (testPkg.packageJson) {
-    const pkgDir = path.dirname(testPkg.packageJson);
-    const pkgJson = require(testPkg.packageJson);
-
-    if (!pkgJson.name) {
-      throw new Error('missing package.json name: ' + testPkg.packageJson);
-    }
-
-    if (!pkgJson.main) {
-      throw new Error('missing package.json main: ' + testPkg.packageJson);
-    }
-
-    const pkgPath = path.join(pkgDir, pkgJson.main);
-    const pkgImport = require(pkgPath);
-
-    if (testPkg.files) {
-      if (!Array.isArray(pkgJson.files)) {
-        throw new Error(testPkg.packageJson + ' missing "files" property');
-      }
-      testPkg.files.forEach(testPkgFile => {
-        if (!pkgJson.files.includes(testPkgFile)) {
-          throw new Error(testPkg.packageJson + ' missing file ' + testPkgFile);
-        }
-
-        const filePath = path.join(__dirname, pkgDir, testPkgFile);
-        fs.accessSync(filePath);
-      });
-    }
-
-    if (pkgJson.module) {
-      const moduleIndex = path.join(__dirname, pkgDir, pkgJson.module);
-      fs.accessSync(moduleIndex);
-    }
-
-    if (pkgJson.types) {
-      const pkgTypes = path.join(__dirname, pkgDir, pkgJson.types);
-      fs.accessSync(pkgTypes);
-    }
-
-    if (testPkg.exports) {
-      testPkg.exports.forEach(exportName => {
-        const m = pkgImport[exportName];
-        if (!m) {
-          throw new Error('export "' + exportName + '" not found in: ' + testPkg.packageJson);
-        }
-      });
-    }
-  } else if (testPkg.files) {
-    testPkg.files.forEach(file => {
-      const filePath = path.join(__dirname, file);
-      fs.statSync(filePath);
-    });
-  }
-}
-
-console.log(`✅ test.dist`);

BREAKING.md

@@ -1,671 +1,3 @@
 # Breaking Changes
 
-This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.
-
-## Versions
-
-- [Version 5.x](#version-5x)
-- [Version 4.x](#version-4x)
-- [Legacy](#legacy)
-
-
-## Version 5.x
-
-- [CSS](#css)
-  * [CSS Utilities](#css-utilities)
-  * [Display Classes](#display-classes)
-  * [Activated, Focused, Hover States](#activated-focused-hover-states)
-  * [Distributed Sass](#distributed-sass)
-- [Components](#components)
-  * [Action Sheet](#action-sheet)
-  * [Anchor](#anchor)
-  * [Back Button](#back-button)
-  * [Button](#button)
-  * [Card](#card)
-  * [Controllers](#controllers)
-  * [FAB Button](#fab-button)
-  * [Item](#item)
-  * [Header / Footer](#header---footer)
-  * [List Header](#list-header)
-  * [Menu](#menu)
-  * [Menu Button](#menu-button)
-  * [Nav Link](#nav-link)
-  * [Radio](#radio)
-  * [Searchbar](#searchbar)
-  * [Segment](#segment)
-  * [Segment Button](#segment-button)
-  * [Select Option](#select-option)
-  * [Skeleton Text](#skeleton-text)
-  * [Split Pane](#split-pane)
-  * [Toast](#toast)
-  * [Tabs](#tabs)
-- [Colors](#colors)
-- [Events](#events)
-- [Mode](#mode)
-- [Ionicons](#ionicons)
-
-
-### CSS
-
-#### CSS Utilities
-
-We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
-
-Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
-
-**Before**
-
-```html
-<ion-header text-center></ion-header>
-<ion-content padding></ion-content>
-<ion-label text-wrap></ion-label>
-<ion-item wrap></ion-item>
-```
-
-**After**
-
-```html
-<ion-header class="ion-text-center"></ion-header>
-<ion-content class="ion-padding"></ion-content>
-<ion-label class="ion-text-wrap"></ion-label>
-<ion-item class="ion-wrap"></ion-item>
-```
-
-
-#### Display Classes
-
-The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of the breakpoint for `.ion-hide-{breakpoint}-down` classes it will use the minimum of that breakpoint.
-
-The [Ionic breakpoints](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints) are the following:
-
-
-| Breakpoint Name | Width   |
-| ----------------| --------|
-| xs              | 0       |
-| sm              | 576px   |
-| md              | 768px   |
-| lg              | 992px   |
-| xl              | 1200px  |
-
-Previously, if you added the class `ion-hide-md-down` to an element, it would hide the element when the screen size was `991px` (the maximum of the `md` breakpoint) or smaller. Now, using this same class will hide the element when the maximum screen size is `768px`.
-
-Below is a table of how the media queries have changed for each class:
-
-| Class Name          | Ionic 4                      | Ionic 5                      |
-| --------------------| -----------------------------| -----------------------------|
-| `.ion-hide-down`    | `@media (max-width: 575px)`  | all screen sizes             |
-| `.ion-hide-sm-down` | `@media (max-width: 767px)`  | `@media (max-width: 576px)`  |
-| `.ion-hide-md-down` | `@media (max-width: 991px)`  | `@media (max-width: 768px)`  |
-| `.ion-hide-lg-down` | `@media (max-width: 1199px)` | `@media (max-width: 992px)`  |
-| `.ion-hide-xl-down` | all screen sizes             | `@media (max-width: 1200px)` |
-
-_Note that no changes were made to the `.ion-hide-{breakpoint}-up` classes._
-
-See the [CSS Utilities responsive display documentation](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) for more information.
-
-
-#### Activated, Focused, Hover States
-
-The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
-
-The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
-
-- Action Sheet
-- Back Button
-- Button
-- FAB Button
-- Item
-- Menu Button
-- Segment Button
-- Tab Button
-
-Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
-
-```css
---background-hover: rgba(255, 255, 255, 0.08);
-```
-
-If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
-
-```css
---background-hover: rgba(0, 0, 0, 0.08);
-```
-
-The new way adds the following variables:
-
-```css
---background-activated-opacity
---background-focused-opacity
---background-hover-opacity
-```
-
-It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names.
-
-This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
-
-
-##### Examples
-
-```css
-/* Setting the button background on hover to solid red */
-ion-button {
-  --background-hover: red;
-  --background-hover-opacity: 1;
-}
-
-/* Setting the action sheet button background on focus to an opaque green */
-ion-action-sheet {
-  --button-background-focus: green;
-  --button-background-focus-opacity: 0.5;
-}
-
-/*
- * Setting the fab button background on hover to match the text color with
- * the default --background-hover-opacity on md
- */
-.md ion-fab-button {
-  --color: #222;
-  --background-hover: #222;
-}
-```
-
-##### Global CSS Properties
-
-Some variables were renamed, removed or added. See the chart below for the changes.
-
-| Old variable                            | Status  | New variable                              |
-| ----------------------------------------| --------|-------------------------------------------|
-| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
-| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
-| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
-| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
-| `--ion-tab-bar-color-activated`         | renamed | `--ion-tab-bar-color-selected`            |
-|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
-| `--ion-toolbar-color-activated`         | removed |                                           |
-| `--ion-item-background-activated`       | removed |                                           |
-| `--ion-item-background-focused`         | removed |                                           |
-| `--ion-item-background-hover`           | removed |                                           |
-
-
-#### Distributed Sass
-
-The `scss` files have been removed from `dist/`. CSS variables should be used to theme instead.
-
-
-### Components
-
-#### Action Sheet
-
-The following CSS variables have been renamed or added:
-
-| Old                      | New                                        |
-|--------------------------| -------------------------------------------|
-|                          | `--button-background`                      |
-| `--background-activated` | `--button-background-activated`            |
-|                          | `--button-background-activated-opacity`    |
-| `--background-selected`  | `--button-background-selected`             |
-|                          | `--button-background-focused`              |
-|                          | `--button-background-focused-opacity`      |
-|                          | `--button-background-hover`                |
-|                          | `--button-background-hover-opacity`        |
-|                          | `--button-background-selected`             |
-|                          | `--button-background-selected-opacity`     |
-|                          | `--button-color`                           |
-|                          | `--button-color-activated`                 |
-|                          | `--button-color-focused`                   |
-|                          | `--button-color-hover`                     |
-|                          | `--button-color-selected`                  |
-
-See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
-
-
-#### Anchor
-
-The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
-
-#### Back Button
-
-- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-- [Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-#### Button
-
-- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-#### Card
-
-Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-
-
-#### Controllers
-
-The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
-
-**Before**
-
-```html
-<ion-loading-controller></ion-loading-controller>
-
-<script>
-  async function presentLoading() {
-    const loadingController = document.querySelector('ion-loading-controller');
-
-    const loading = await loadingController.create({
-      message: 'Hello',
-      duration: 2000
-    });
-    await loading.present();
-  }
-</script>
-
-```
-
-**After**
-
-```html
-<script type="module">
-  import { loadingController } from '@ionic/core';
-  window.loadingController = loadingController;
-</script>
-
-<script>
-  async function presentLoading() {
-    const loading = await loadingController.create({
-      message: 'Hello',
-      duration: 2000
-    });
-    await loading.present();
-  }
-</script>
-```
-
-#### FAB Button
-
-- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-
-#### Item
-
-- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-
-#### Header / Footer
-
-The `no-border` attribute has been removed, use `ion-no-border` class instead. See [CSS Utilities](#css-utilities) above for more information on why this change was made.
-
-
-#### List Header
-
-The list header has been redesigned to match the latest iOS spec. This may break the design of your application as the previous design had a small font size with uppercase text. The latest design includes a larger, bolder text.
-
-In addition, any text content inside of an `<ion-list-header>` should be wrapped in an `<ion-label>` in order to get the proper styling of the new design. If the label is missing, the button alignment in the list header may look off.
-
-**Before**
-
-```html
-<ion-list-header>
-  New This Week
-  <ion-button>See All</ion-button>
-</ion-list-header>
-```
-
-**After**
-
-```html
-<ion-list-header>
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-```
-
-The button has also been updated to default to `fill="clear"` and `size="small"` when inside of a list header. If the old look of the list header or buttons is desired, use custom CSS or button properties to achieve it.
-
-For more information see the [List Header usage](https://ionicframework.com/docs/api/list-header#usage).
-
-
-#### Menu
-
-- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
-- The `side` values `left` and `right` have been removed, use `start` and `end` instead.
-- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-
-  **Before**
-
-  ```html
-  <ion-menu>...</ion-menu>
-  <ion-content main>...</ion-content>
-  ```
-
-  **After**
-
-  ```html
-  <ion-menu content-id="main"></ion-menu>
-  <ion-content id="main">...</ion-content>
-  ```
-- The presentation type in `ios` now defaults to `"overlay"`.
-
-
-#### Menu Button
-
-- [Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-
-#### Nav Link
-
-The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
-
-
-#### Radio
-
-The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button.
-
-`ion-radio` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-radio-group` instead.
-
-**Before**
-
-```html
-<ion-radio checked>One</ion-radio>
-
-<ion-radio-group>
-  <ion-radio>One</ion-radio>
-  <ion-radio checked>Two</ion-radio>
-</ion-radio-group>
-```
-
-**After**
-
-```html
-<ion-radio-group value="one">
-  <ion-radio value="one">One</ion-radio>
-</ion-radio-group>
-
-<ion-radio-group value="two">
-  <ion-radio value="one">One</ion-radio>
-  <ion-radio value="two">Two</ion-radio>
-</ion-radio-group>
-```
-
-#### Searchbar
-
-##### Show Cancel Button
-
-The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`.
-
-**Before**
-
-```html
-<ion-searchbar show-cancel-button>
-<ion-searchbar show-cancel-button="true">
-<ion-searchbar show-cancel-button="false">
-```
-
-**After**
-
-```html
-<ion-searchbar show-cancel-button="focus">
-<ion-searchbar show-cancel-button="focus">
-<ion-searchbar show-cancel-button="never">
-```
-
-See the [Searchbar documentation](https://ionicframework.com/docs/api/searchbar#properties) for more information.
-
-##### Inputmode
-
-The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the inputmode property to `"search"`.
-
-
-#### Segment
-
-Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
-
-##### Renamed Events
-
-`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead.
-
-##### Button States
-
-- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
-  ```
-  --color-activated
-  --background-activated
-  ```
-- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
-
-##### Indicator Color
-
-- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
-- `--indicator-color-checked` has been removed
-- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
-- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
-  ```css
-  .md ion-segment::after {
-      position: absolute;
-      bottom: 0;
-      height: 2px;
-      width: 100%;
-      content: '';
-      background: rgba(0,0,0,0.5);
-      z-index: -1;
-  }
-  ```
-
-##### Background & Color
-
-A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
-
-```
---background: Background of the segment button
---background-checked: Background of the checked segment button
---background-disabled: Background of the disabled segment button
---background-hover: Background of the segment button on hover
-```
-
-> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
-
-The above variables *will not* be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
-
-```
---color: Color of the segment button
---color-checked: Color of the checked segment button
---color-disabled: Color of the disabled segment button
---color-hover: Color of the segment button on hover
-```
-
-###### Removed variables
-
-The following variables were removed due to the current spec no longer using them.
-
-- `--color-checked-disabled`
-- `--background-disabled`
-- `--color-disabled`
-- `--background-activated`
-- `--color-activated`
-
-##### Global CSS Properties
-
-Some variables were renamed or added. See the chart below for the new names.
-
-| Old variable                            | Status  | New variable                              |
-| ----------------------------------------| --------|-------------------------------------------|
-| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
-| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
-| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
-| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
-|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
-
-
-#### Segment Button
-
-The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button.
-
-**Before**
-
-```html
-<ion-segment>
-  <ion-segment-button>One</ion-segment-button>
-  <ion-segment-button checked>Two</ion-segment-button>
-  <ion-segment-button>Three</ion-segment-button>
-</ion-segment>
-```
-
-**After**
-
-```html
-<ion-segment value="two">
-  <ion-segment-button value="one">One</ion-segment-button>
-  <ion-segment-button value="two">Two</ion-segment-button>
-  <ion-segment-button value="three">Three</ion-segment-button>
-</ion-segment>
-```
-
-
-#### Select Option
-
-The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option.
-
-**Before**
-
-```html
-<ion-select>
-  <ion-select-option>One</ion-select-option>
-  <ion-select-option selected>Two</ion-select-option>
-</ion-select>
-```
-
-**After**
-
-```html
-<ion-select value="two">
-  <ion-select-option value="one">One</ion-select-option>
-  <ion-select-option value="two">Two</ion-select-option>
-</ion-select>
-```
-
-
-#### Skeleton Text
-
-The `width` property has been removed in favor of using CSS styling.
-
-
-#### Split Pane
-- Converted to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-  **Before**
-
-  ```html
-  <ion-split-pane>
-    ...
-    <div main>...</div>
-  </ion-split-pane>
-  ```
-
-  **After**
-
-  ```html
-  <ion-split-pane content-id="main">
-    ...
-    <div id="main">...</div>
-  </ion-split-pane>
-  ```
-
-#### Tabs
-
-- [Focused State](#activated-focused-hover-states) have been updated.
-
-#### Toast
-
-The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
-
-**Before**
-
-```javascript
-async presentToast() {
-  const toast = await this.toastController.create({
-    message: 'Your settings have been saved.',
-    showCloseButton: true,
-    closeButtonText: 'Close'
-  });
-  toast.present();
-}
-```
-
-**After**
-
-```javascript
-async presentToast() {
-  const toast = await this.toastController.create({
-    message: 'Your settings have been saved.',
-    buttons: [
-      {
-        text: 'Close',
-        role: 'cancel',
-        handler: () => {
-          console.log('Close clicked');
-        }
-      }
-    ]
-  });
-  toast.present();
-}
-```
-
-### Colors
-
-The default Ionic colors have been updated to the following:
-
-```scss
-primary:         #3880ff
-secondary:       #3dc2ff
-tertiary:        #5260ff
-success:         #2dd36f
-warning:         #ffc409
-danger:          #eb445a
-light:           #f4f5f8
-medium:          #92949c
-dark:            #222428
-```
-
-`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
-
-This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
-
-
-### Events
-
-The `@ionic/angular` Events service has been removed.
-
-- Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
-- Use "Redux" for advanced state management: https://ngrx.io
-
-
-### Mode
-
-Mode is now cascaded from the parent to the child component. Previously, if you wanted to update a component and its children to use the same mode, you'd have to set it on all components. For example, if you wanted to use a `md` segment no matter the mode, you'd have to write the following:
-
-```html
-<ion-segment mode="md">
-  <ion-segment-button mode="md">Button</ion-segment-button>
-  <ion-segment-button mode="md">Button</ion-segment-button>
-</ion-segment>
-```
-
-Now, the `mode` only needs to be set on the `ion-segment` and it will be inherited. If this behavior is not desired set a different mode on the child component.
-
-
-### Ionicons
-
-Ionicons 5 has been released! :tada: This brings many changes including a top to bottom re-draw of every icon, variants for each icon (filled, outline, and sharp), and the removal of auto-switching icons based on the platform.
-
-For more information, check out the [Ionicons Changelog](https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md)!
-
-
-
---------------------------------------------------------------------------------------------------
-
-## Version 4.x
-
-The list of the breaking changes introduced in Ionic Angular v4 can be found in [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).
-
-## Legacy
-
-For the breaking changes of the older legacy versions (versions 2.x & 3.x) of Ionic Framework, see the [v3 changelog](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md).
+The list of the breaking changes introduced in Ionic Angular v4 has been moved to [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).

README.md

@@ -13,7 +13,7 @@ Ionic is based on [Web Components](https://www.webcomponents.org/introduction) a
 | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | [`README.md`](core/README.md)
 | **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | [`README.md`](angular/README.md)
 | **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](vue/README.md)
-| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](packages/react/README.md)
+| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](react/README.md)
 
 Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v3`](https://github.com/ionic-team/ionic-v3) repo. See [Earlier Versions](#earlier-versions).
 

angular/BREAKING.md

@@ -62,7 +62,7 @@ A list of the breaking changes introduced to each component in Ionic Angular v4.
 
 ## Action Sheet
 
-The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
+The `title`, `subTitle` and `enableBackdropDismiss` properties has been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
 
 **Old Usage Example:**
 
@@ -89,7 +89,7 @@ await actionSheet.present();
 
 ## Alert
 
-The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
+The `title`, `subTitle` and `enableBackdropDismiss` properties has been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
 
 **Old Usage Example:**
 
@@ -498,7 +498,7 @@ The `<ion-fab>` container was previously placed inside of the fixed content by d
 
 ### Markup Changed
 
-The Grid has been refactored in order to support CSS variables and a dynamic number of columns. The following column attributes have been changed.
+The Grid has been refactored in order to support css variables and a dynamic number of columns. The following column attributes have been changed.
 
 _In the following examples, `{breakpoint}` refers to the optional screen breakpoint (xs, sm, md, lg, xl) and `{value}` refers to the number of columns (`auto` or a number between `1` and `12`)._
 
@@ -507,7 +507,7 @@ _In the following examples, `{breakpoint}` refers to the optional screen breakpo
 - `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
 - `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`
 
-Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/pages/layout/grid.md).
+Customizing the padding and width of a grid should now be done with css variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
 
 ## Icon
 
@@ -1092,7 +1092,7 @@ openLoading() {
 ```javascript
 async openLoading() {
   let loading = this.loadingCtrl.create({
-    message: 'Loading...'
+    content: 'Loading...'
   });
 
   await loading.present();
@@ -1798,7 +1798,7 @@ To include the stylesheet for testing such as in a Plunker, Codepen, or anywhere
 
 #### Production
 
-To use the CSS in production, we recommend importing it into a global file, such as `app/global.scss`:
+To use the css in production, we recommend importing it into a global file, such as `app/global.scss`:
 
 ```css
 /** Basic CSS for Ionic Apps */

angular/README.md

@@ -23,7 +23,7 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 1. Pull the latest from master
 2. Build ionic/angular: `npm run build`
-3. Run `npm link` from `ionic/angular/dist` directory
+3. Run `npm link` from ionic/angular directory
 4. Create a blank angular project
 
 ```

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.1.1",
+  "version": "4.4.0",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -19,16 +19,12 @@
     "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.ng && npm run build.core && npm run clean-generated",
+    "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
     "build.fesm": "rollup --config ./scripts/rollup.config.js",
     "build.link": "npm run build && node scripts/link-copy.js",
-    "build.ng": "ng-packagr -p package.json",
+    "build.ng": "npm run build.es2015 && npm run build.es5",
     "build.es2015": "ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js",
     "build.es5": "ngc -p tsconfig.legacy.json && rollup --config ./scripts/rollup.config.legacy.js",
     "clean": "node scripts/clean.js",
@@ -41,46 +37,53 @@
     "tsc": "tsc -p .",
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
+  "module": "dist/fesm5.js",
+  "main": "dist/fesm5.js",
+  "types": "dist/core.d.ts",
+  "files": [
+    "dist/",
+    "css/"
+  ],
   "dependencies": {
-    "@ionic/core": "5.1.1",
+    "@ionic/core": "4.4.0",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
-    "@angular/core": ">=8.2.7",
-    "@angular/forms": ">=8.2.7",
-    "@angular/router": ">=8.2.7",
+    "@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",
     "rxjs": ">=6.2.0",
-    "zone.js": ">=0.8.26"
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/core": "8.3.17",
-    "@angular-devkit/schematics": "8.3.17",
-    "@angular/common": "8.2.13",
-    "@angular/compiler": "8.2.13",
-    "@angular/compiler-cli": "8.2.13",
-    "@angular/core": "8.2.13",
-    "@angular/forms": "8.2.13",
-    "@angular/router": "8.2.13",
-    "@types/node": "12.12.5",
+    "@angular-devkit/core": "^7.2.1",
+    "@angular-devkit/schematics": "^7.2.1",
+    "@angular/common": "^7.2.1",
+    "@angular/compiler": "^7.2.1",
+    "@angular/compiler-cli": "^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",
+    "@types/node": "~10.12.0",
     "fs-extra": "^7.0.0",
-    "glob": "^7.1.4",
-    "ng-packagr": "^9.1.5",
-    "rollup": "~1.17.0",
-    "rollup-plugin-node-resolve": "~5.2.0",
-    "rxjs": "^6.5.2",
+    "glob": "^7.1.3",
+    "rollup": "^1.1.2",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rxjs": "^6.2.0",
     "tsickle": "^0.34.0",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",
-    "typescript": "3.4.5",
+    "typescript": "3.2.4",
     "zone.js": "^0.8.28"
   },
-  "schematics": "./schematics/collection.json",
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/index.ts"
-    },
-    "whitelistedNonPeerDependencies": [
-      "@ionic/core"
-    ]
-  }
+  "schematics": "./dist/schematics/collection.json"
 }

angular/scripts/README.md

@@ -15,7 +15,3 @@
     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/build-core.js

@@ -15,7 +15,7 @@ function copyIonicons() {
 
 function copyCSS() {
   const src = path.join(__dirname, '..', '..', 'core', 'css');
-  const dst = path.join(__dirname, '..','dist', 'css');
+  const dst = path.join(__dirname, '..', 'css');
 
   fs.removeSync(dst);
   fs.copySync(src, dst);

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 = [
-  path.join(ROOT_DIR, 'dist')
+  'dist'
 ];
 
 cleanDirs.forEach(dir => {
-  fs.emptyDirSync(dir);
+  const cleanDir = path.join(__dirname, '../', dir);
+  fs.removeSync(cleanDir);
 });

angular/scripts/package.json

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

angular/scripts/rollup.config.legacy.js

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

angular/src/app-initialize.ts

@@ -1,45 +1,55 @@
-import { NgZone } from '@angular/core';
-import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
+import { defineCustomElements } from '@ionic/core/loader';
 
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
-import { raf } from './util/util';
 
-let didInitialize = false;
-
-export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
+export function appInitialize(config: Config, doc: Document) {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;
-    if (win && typeof (window as any) !== 'undefined') {
-      if (didInitialize) {
-        console.warn('Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.');
-      }
-      didInitialize = true;
+    if (win) {
       const Ionic = win.Ionic = win.Ionic || {};
 
-      Ionic.config = {
-        ...config,
-        _zoneGate: (h: any) => zone.run(h)
+      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);
+        }
       };
 
-      const aelFn = '__zone_symbol__addEventListener' in (doc.body as any)
-        ? '__zone_symbol__addEventListener'
-        : 'addEventListener';
+      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);
+        }
+      };
 
-      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);
-          }
-        });
+      return defineCustomElements(win, {
+        exclude: ['ion-tabs', 'ion-tab']
       });
     }
   };
-};
+}
+
+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'])
-  _handleIonChange(el: any) {
-    this.handleChangeEvent(el, el.checked);
+  @HostListener('ionChange', ['$event.target.checked'])
+  _handleIonChange(value: any) {
+    this.handleChangeEvent(value);
   }
 }

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'])
-  _handleIonChange(el: any) {
-    this.handleChangeEvent(el, el.value);
+  @HostListener('ionChange', ['$event.target.value'])
+  _handleIonChange(value: any) {
+    this.handleChangeEvent(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'])
-  _handleIonSelect(el: any) {
-    this.handleChangeEvent(el, el.checked);
+  @HostListener('ionSelect', ['$event.target.checked'])
+  _handleIonSelect(value: any) {
+    this.handleChangeEvent(value);
   }
 }

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'])
-  _handleChangeEvent(el: any) {
-    this.handleChangeEvent(el, el.value);
+  @HostListener('ionChange', ['$event.target.value'])
+  _handleChangeEvent(value: any) {
+    this.handleChangeEvent(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'])
-  _handleInputEvent(el: any) {
-    this.handleChangeEvent(el, el.value);
+  @HostListener('ionChange', ['$event.target.value'])
+  _handleInputEvent(value: any) {
+    this.handleChangeEvent(value);
   }
 }

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

@@ -1,8 +1,6 @@
 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 = () => {/**/};
@@ -12,33 +10,22 @@ export class ValueAccessor implements ControlValueAccessor {
   constructor(protected el: ElementRef) {}
 
   writeValue(value: any) {
-    /**
-     * TODO for Ionic 6:
-     * Change `value == null ? '' : value;`
-     * to `value`. This was a fix for IE9, but IE9
-     * is no longer supported; however, this change
-     * is potentially a breaking change
-     */
     this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
     setIonicClasses(this.el);
   }
 
-  handleChangeEvent(el: HTMLElement, value: any) {
-    if (el === this.el.nativeElement) {
-      if (value !== this.lastValue) {
-        this.lastValue = value;
-        this.onChange(value);
-      }
-      setIonicClasses(this.el);
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
     }
+    setIonicClasses(this.el);
   }
 
-  @HostListener('ionBlur', ['$event.target'])
-  _handleBlurEvent(el: any) {
-    if (el === this.el.nativeElement) {
-      this.onTouched();
-      setIonicClasses(this.el);
-    }
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+    setIonicClasses(this.el);
   }
 
   registerOnChange(fn: (value: any) => void) {
@@ -54,8 +41,8 @@ export class ValueAccessor implements ControlValueAccessor {
   }
 }
 
-export const setIonicClasses = (element: ElementRef) => {
-  raf(() => {
+export function setIonicClasses(element: ElementRef) {
+  requestAnimationFrame(() => {
     const input = element.nativeElement as HTMLElement;
     const classes = getClasses(input);
     setClasses(input, classes);
@@ -65,9 +52,9 @@ export const setIonicClasses = (element: ElementRef) => {
       setClasses(item, classes);
     }
   });
-};
+}
 
-const getClasses = (element: HTMLElement) => {
+function getClasses(element: HTMLElement) {
   const classList = element.classList;
   const classes = [];
   for (let i = 0; i < classList.length; i++) {
@@ -77,22 +64,22 @@ const getClasses = (element: HTMLElement) => {
     }
   }
   return classes;
-};
+}
 
-const setClasses = (element: HTMLElement, classes: string[]) => {
+function setClasses(element: HTMLElement, classes: string[]) {
   const classList = element.classList;
-  [
+
+  classList.remove(
     'ion-valid',
     'ion-invalid',
     'ion-touched',
     'ion-untouched',
     'ion-dirty',
     'ion-pristine'
-  ].forEach(c => classList.remove(c));
+  );
+  classList.add(...classes);
+}
 
-  classes.forEach(c => classList.add(c));
-};
-
-const startsWith = (input: string, search: string): boolean => {
+function startsWith(input: string, search: string): boolean {
   return input.substr(0, search.length) === search;
-};
+}

angular/src/directives/navigation/ion-back-button.ts

@@ -1,13 +1,12 @@
 import { Directive, HostListener, Optional } from '@angular/core';
 
-import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
 
 import { IonRouterOutlet } from './ion-router-outlet';
 
 @Directive({
   selector: 'ion-back-button',
-  inputs: ['defaultHref'],
+  inputs: ['defaultHref']
 })
 export class IonBackButtonDelegate {
 
@@ -15,8 +14,7 @@ export class IonBackButtonDelegate {
 
   constructor(
     @Optional() private routerOutlet: IonRouterOutlet,
-    private navCtrl: NavController,
-    private config: Config
+    private navCtrl: NavController
   ) {}
 
   /**
@@ -24,13 +22,11 @@ export class IonBackButtonDelegate {
    */
   @HostListener('click', ['$event'])
   onClick(ev: Event) {
-    const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');
-
     if (this.routerOutlet && this.routerOutlet.canGoBack()) {
       this.routerOutlet.pop();
       ev.preventDefault();
-    } else if (defaultHref != null) {
-      this.navCtrl.navigateBack(defaultHref);
+    } else if (this.defaultHref != null) {
+      this.navCtrl.navigateBack(this.defaultHref);
       ev.preventDefault();
     }
   }

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

@@ -1,10 +1,8 @@
-import { Location } from '@angular/common';
-import { Attribute, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
+import { Attribute, ChangeDetectorRef, 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';
 
-import { AnimationBuilder } from '../../';
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
 
@@ -14,18 +12,17 @@ import { RouteView, getUrl } from './stack-utils';
 @Directive({
   selector: 'ion-router-outlet',
   exportAs: 'outlet',
-  inputs: ['animated', 'animation', 'swipeGesture']
+  inputs: ['animated', 'swipeGesture']
 })
 export class IonRouterOutlet implements OnDestroy, OnInit {
-  nativeEl: HTMLIonRouterOutletElement;
-
   private activated: ComponentRef<any> | null = null;
-  activatedView: RouteView | null = null;
+  private activatedView: RouteView | null = null;
 
   private _activatedRoute: ActivatedRoute | null = null;
   private _swipeGesture?: boolean;
   private name: string;
   private stackCtrl: StackController;
+  private nativeEl: HTMLIonRouterOutletElement;
 
   // Maintain map of activated route proxies for each component instance
   private proxyMap = new WeakMap<any, ActivatedRoute>();
@@ -39,10 +36,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   @Output('activate') activateEvents = new EventEmitter<any>();
   @Output('deactivate') deactivateEvents = new EventEmitter<any>();
 
-  set animation(animation: AnimationBuilder) {
-    this.nativeEl.animation = animation;
-  }
-
   set animated(animated: boolean) {
     this.nativeEl.animated = animated;
   }
@@ -63,9 +56,9 @@ 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,
     elementRef: ElementRef,
     router: Router,
     zone: NgZone,
@@ -75,7 +68,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     this.nativeEl = elementRef.nativeElement;
     this.name = name || PRIMARY_OUTLET;
     this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
-    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
+    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone);
     parentContexts.onChildOutletCreated(this.name, this as any);
   }
 
@@ -99,7 +92,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 as any).mode === 'ios');
+          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', this.nativeEl.mode === 'ios');
         }
       });
     }
@@ -148,20 +141,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     if (this.activated) {
       if (this.activatedView) {
         this.activatedView.savedData = new Map(this.getContext()!.children['contexts']);
-
-        /**
-         * Ensure we are saving the NavigationExtras
-         * data otherwise it will be lost
-         */
-        this.activatedView.savedExtras = {};
-        const context = this.getContext()!;
-
-        if (context.route) {
-          const contextSnapshot = context.route.snapshot;
-
-          this.activatedView.savedExtras.queryParams = contextSnapshot.queryParams;
-          this.activatedView.savedExtras.fragment = contextSnapshot.fragment;
-        }
       }
       const c = this.component;
       this.activatedView = null;
@@ -215,6 +194,8 @@ 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;
@@ -247,22 +228,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     return active ? active.url : undefined;
   }
 
-  /**
-   * Returns the RouteView of the active page of each stack.
-   * @internal
-   */
-  getLastRouteView(stackId?: string): RouteView | undefined {
-    return this.stackCtrl.getLastUrl(stackId);
-  }
-
-  /**
-   * Returns the root view in the tab stack.
-   * @internal
-   */
-  getRootView(stackId?: string): RouteView | undefined {
-    return this.stackCtrl.getRootUrl(stackId);
-  }
-
   /**
    * Returns the active stack ID. In the context of ion-tabs, it means the active tab.
    */
@@ -336,7 +301,7 @@ class OutletInjector implements Injector {
     private route: ActivatedRoute,
     private childContexts: ChildrenOutletContexts,
     private parent: Injector
-  ) { }
+  ) {}
 
   get(token: any, notFoundValue?: any): any {
     if (token === ActivatedRoute) {

angular/src/directives/navigation/ion-tabs.ts

@@ -42,15 +42,15 @@ import { StackEvent } from './stack-utils';
 })
 export class IonTabs {
 
-  @ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
-  @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
+  @ViewChild('outlet', { read: IonRouterOutlet }) outlet: IonRouterOutlet;
+  @ContentChild(IonTabBar) tabBar: IonTabBar | undefined;
 
-  @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
-  @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
+  @Output() ionTabsWillChange = new EventEmitter<{tab: string}>();
+  @Output() ionTabsDidChange = new EventEmitter<{tab: string}>();
 
   constructor(
     private navCtrl: NavController,
-  ) { }
+  ) {}
 
   /**
    * @internal
@@ -66,59 +66,18 @@ export class IonTabs {
     }
   }
 
-  /**
-   * When a tab button is clicked, there are several scenarios:
-   * 1. If the selected tab is currently active (the tab button has been clicked
-   *    again), then it should go to the root view for that tab.
-   *
-   *   a. Get the saved root view from the router outlet. If the saved root view
-   *      matches the tabRootUrl, set the route view to this view including the
-   *      navigation extras.
-   *   b. If the saved root view from the router outlet does
-   *      not match, navigate to the tabRootUrl. No navigation extras are
-   *      included.
-   *
-   * 2. If the current tab tab is not currently selected, get the last route
-   *    view from the router outlet.
-   *
-   *   a. If the last route view exists, navigate to that view including any
-   *      navigation extras
-   *   b. If the last route view doesn't exist, then navigate
-   *      to the default tabRootUrl
-   */
   @HostListener('ionTabButtonClick', ['$event.detail.tab'])
   select(tab: string) {
     const alreadySelected = this.outlet.getActiveStackId() === tab;
-    const tabRootUrl = `${this.outlet.tabsPrefix}/${tab}`;
-    if (alreadySelected) {
-      const activeStackId = this.outlet.getActiveStackId();
-      const activeView = this.outlet.getLastRouteView(activeStackId);
+    const href = `${this.outlet.tabsPrefix}/${tab}`;
+    const url = alreadySelected
+      ? href
+      : this.outlet.getLastUrl(tab) || href;
 
-      // If on root tab, do not navigate to root tab again
-      if (activeView.url === tabRootUrl) { return; }
-
-      const rootView = this.outlet.getRootView(tab);
-      const navigationExtras = rootView && tabRootUrl === rootView.url && rootView.savedExtras;
-      return this.navCtrl.navigateRoot(tabRootUrl, {
-        ...(navigationExtras),
-        animated: true,
-        animationDirection: 'back',
-      });
-    } else {
-      const lastRoute = this.outlet.getLastRouteView(tab);
-      /**
-       * If there is a lastRoute, goto that, otherwise goto the fallback url of the
-       * selected tab
-       */
-      const url = lastRoute && lastRoute.url || tabRootUrl;
-      const navigationExtras = lastRoute && lastRoute.savedExtras;
-
-      return this.navCtrl.navigateRoot(url, {
-        ...(navigationExtras),
-        animated: true,
-        animationDirection: 'back',
-      });
-    }
+    return this.navCtrl.navigateRoot(url, {
+      animated: true,
+      animationDirection: 'back'
+    });
   }
 
   getSelected(): string | undefined {

angular/src/directives/navigation/nav-delegate.ts

@@ -1,17 +1,11 @@
 import { ComponentFactoryResolver, Directive, ElementRef, Injector, ViewContainerRef } from '@angular/core';
 
 import { AngularDelegate } from '../../providers/angular-delegate';
-import { ProxyCmp, proxyOutputs } from '../proxies-utils';
 
-@ProxyCmp({
-  inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
-  methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']
-})
 @Directive({
-  selector: 'ion-nav'
+  selector: 'ion-nav',
 })
 export class NavDelegate {
-  protected el: HTMLElement;
   constructor(
     ref: ElementRef,
     resolver: ComponentFactoryResolver,
@@ -19,8 +13,6 @@ export class NavDelegate {
     angularDelegate: AngularDelegate,
     location: ViewContainerRef
   ) {
-    this.el = ref.nativeElement;
     ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
-    proxyOutputs(this, this.el, ['ionNavDidChange' , 'ionNavWillChange' ]);
   }
 }

angular/src/directives/navigation/nav-params.ts

@@ -38,7 +38,7 @@ export class NavParams {
    *
    * @param param Which param you want to look up
    */
-  get<T = any>(param: string): T {
+  get(param: string): any {
     return this.data[param];
   }
 }

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

@@ -1,4 +1,3 @@
-import { Location } from '@angular/common';
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterDirection } from '@ionic/core';
@@ -23,7 +22,6 @@ export class StackController {
     private router: Router,
     private navCtrl: NavController,
     private zone: NgZone,
-    private location: Location
   ) {
     this.tabsPrefix = tabsPrefix !== undefined ? toSegments(tabsPrefix) : undefined;
   }
@@ -31,7 +29,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(this.zone, ref.instance, element);
+    const unlistenEvents = bindLifecycleEvents(ref.instance, element);
     return {
       id: this.nextId++,
       stackId: computeStackId(this.tabsPrefix, url),
@@ -59,7 +57,6 @@ export class StackController {
       direction = 'back';
       animation = undefined;
     }
-
     const viewsSnapshot = this.views.slice();
 
     let currentNavigation;
@@ -70,7 +67,7 @@ export class StackController {
     if (router.getCurrentNavigation) {
       currentNavigation = router.getCurrentNavigation();
 
-      // Angular < 7.2.0
+    // Angular < 7.2.0
     } else if (
       router.navigations &&
       router.navigations.value
@@ -95,36 +92,16 @@ export class StackController {
       }
     }
 
-    const reused = this.views.includes(enteringView);
     const views = this.insertView(enteringView, direction);
-
-    // 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
-          }));
-      });
+    return this.wait(async () => {
+      await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
+      await cleanupAsync(enteringView, views, viewsSnapshot);
+      return {
+        enteringView,
+        direction,
+        animation,
+        tabSwitch
+      };
     });
   }
 
@@ -155,34 +132,32 @@ export class StackController {
         }
       }
 
-      return this.navCtrl.navigateBack(url, view.savedExtras).then(() => true);
+      return this.navCtrl.navigateBack(url).then(() => true);
     });
   }
 
-  startBackTransition() {
+  async startBackTransition() {
     const leavingView = this.activeView;
     if (leavingView) {
       const views = this.getStack(leavingView.stackId);
       const enteringView = views[views.length - 2];
-      return this.wait(() => {
+      enteringView.ref.changeDetectorRef.reattach();
+      await this.wait(() => {
         return this.transition(
           enteringView, // entering view
           leavingView, // leaving view
           'back',
-          this.canGoBack(2),
+          true,
           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);
     }
   }
 
@@ -191,14 +166,6 @@ export class StackController {
     return views.length > 0 ? views[views.length - 1] : undefined;
   }
 
-  /**
-   * @internal
-   */
-  getRootUrl(stackId?: string) {
-    const views = this.getStack(stackId);
-    return views.length > 0 ? views[0] : undefined;
-  }
-
   getActiveStackId(): string | undefined {
     return this.activeView ? this.activeView.stackId : undefined;
   }
@@ -220,7 +187,7 @@ export class StackController {
     return this.views.slice();
   }
 
-  private transition(
+  private async transition(
     enteringView: RouteView | undefined,
     leavingView: RouteView | undefined,
     direction: 'forward' | 'back' | undefined,
@@ -229,32 +196,26 @@ export class StackController {
   ) {
     if (this.skipTransition) {
       this.skipTransition = false;
-      return Promise.resolve(false);
-    }
-    if (leavingView === enteringView) {
-      return Promise.resolve(false);
+      return;
     }
     const enteringEl = enteringView ? enteringView.element : undefined;
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;
     if (enteringEl && enteringEl !== leavingEl) {
-      enteringEl.classList.add('ion-page');
-      enteringEl.classList.add('ion-page-invisible');
+      enteringEl.classList.add('ion-page', 'ion-page-invisible');
       if (enteringEl.parentElement !== containerEl) {
         containerEl.appendChild(enteringEl);
       }
 
-      if ((containerEl as any).commit) {
-        return containerEl.commit(enteringEl, leavingEl, {
-          deepWait: true,
-          duration: direction === undefined ? 0 : undefined,
-          direction,
-          showGoBack,
-          progressAnimation
-        });
-      }
+      await containerEl.componentOnReady();
+      await 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> {
@@ -267,41 +228,26 @@ export class StackController {
   }
 }
 
-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();
-      });
+function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      cleanup(activeRoute, views, viewsSnapshot);
+      resolve();
     });
-  }
-  return Promise.resolve();
-};
+  });
+}
 
-const cleanup = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
+function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
   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
-     * we don't pre-emptively detach a view while
-     * it is in mid-transition.
-     *
-     * In this instance we also do not care about query
-     * params or fragments as it will be the same view regardless
-     */
-    const locationWithoutParams = location.path().split('?')[0];
-    const locationWithoutFragment = locationWithoutParams.split('#')[0];
-
-    if (view !== activeRoute && view.url !== locationWithoutFragment) {
+    if (view !== activeRoute) {
       const element = view.element;
       element.setAttribute('aria-hidden', 'true');
       element.classList.add('ion-page-hidden');
       view.ref.changeDetectorRef.detach();
     }
   });
-};
+}

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

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

angular/src/directives/proxies-list.txt

@@ -2,7 +2,7 @@
 import * as d from './proxies';
 
 export const DIRECTIVES = [
-  d.IonApp,
+d.IonApp,
   d.IonAvatar,
   d.IonBackButton,
   d.IonBackdrop,
@@ -43,7 +43,9 @@ export const DIRECTIVES = [
   d.IonMenuButton,
   d.IonMenuToggle,
   d.IonNav,
-  d.IonNavLink,
+  d.IonNavPop,
+  d.IonNavPush,
+  d.IonNavSetRoot,
   d.IonNote,
   d.IonProgressBar,
   d.IonRadio,

angular/src/directives/proxies-utils.ts

@@ -1,46 +1,26 @@
-/* eslint-disable */
 /* tslint:disable */
 import { fromEvent } from 'rxjs';
 
-export const proxyInputs = (Cmp: any, inputs: string[]) => {
+export function proxyInputs(Cmp: any, inputs: string[]) {
   const Prototype = Cmp.prototype;
   inputs.forEach(item => {
-  Object.defineProperty(Prototype, item, {
-    get() {
-    return this.el[item];
-    },
-    set(val: any) {
-    this.z.runOutsideAngular(() => (this.el[item] = val));
-    }
+    Object.defineProperty(Prototype, item, {
+      get() { return this.el[item]; },
+      set(val: any) { this.el[item] = val; },
+    });
   });
-  });
-};
+}
 
-export const proxyMethods = (Cmp: any, methods: string[]) => {
+export function proxyMethods(Cmp: any, methods: string[]) {
   const Prototype = Cmp.prototype;
   methods.forEach(methodName => {
-  Prototype[methodName] = function () {
-    const args = arguments;
-    return this.z.runOutsideAngular(() =>
-    this.el[methodName].apply(this.el, args)
-    );
-  };
+    Prototype[methodName] = function() {
+      const args = arguments;
+      return this.el.componentOnReady().then((el: any) => el[methodName].apply(el, args));
+    };
   });
-};
+}
 
-export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+export function proxyOutputs(instance: any, el: any, events: string[]) {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
 }
-
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator =  function(cls: any){
-  if (opts.inputs) {
-    proxyInputs(cls, opts.inputs);
-  }
-  if (opts.methods) {
-    proxyMethods(cls, opts.methods);
-  }
-  return cls;
-  };
-  return decorator;
-}

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, NgZone, SimpleChanges, TrackByFunction } from '@angular/core';
-import { Cell, CellType, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn } from '@ionic/core';
+import { Cell, CellType, HeaderFn, ItemHeightFn } from '@ionic/core';
 
-import { ProxyCmp } from '../proxies-utils';
+import { proxyInputs, proxyMethods } from '../proxies-utils';
 
 import { VirtualFooter } from './virtual-footer';
 import { VirtualHeader } from './virtual-header';
@@ -75,7 +75,7 @@ export declare interface IonVirtualScroll {
 
   /**
    * An optional function that maps each item within their height.
-   * When this function is provided, heavy optimizations and fast path can be taked by
+   * When this function is provides, 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,16 +83,6 @@ 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`.
    */
@@ -112,10 +102,6 @@ export declare interface IonVirtualScroll {
   'positionForItem': (index: number) => Promise<number>;
 }
 
-@ProxyCmp({
-  inputs: ['approxItemHeight', 'approxHeaderHeight', 'approxFooterHeight', 'headerFn', 'footerFn', 'items', 'itemHeight', 'headerHeight', 'footerHeight'],
-  methods: ['checkEnd', 'checkRange', 'positionForItem']
-})
 @Component({
   selector: 'ion-virtual-scroll',
   template: '<ng-content></ng-content>',
@@ -128,8 +114,6 @@ export declare interface IonVirtualScroll {
     'footerFn',
     'items',
     'itemHeight',
-    'headerHeight',
-    'footerHeight',
     'trackBy'
   ]
 })
@@ -137,14 +121,14 @@ export class IonVirtualScroll {
 
   private differ?: IterableDiffer<any>;
   private el: HTMLIonVirtualScrollElement;
-  private refMap = new WeakMap<HTMLElement, EmbeddedViewRef<VirtualContext>>();
+  private refMap = new WeakMap<HTMLElement, EmbeddedViewRef<VirtualContext>> ();
 
-  @ContentChild(VirtualItem, { static: false }) itmTmp!: VirtualItem;
-  @ContentChild(VirtualHeader, { static: false }) hdrTmp!: VirtualHeader;
-  @ContentChild(VirtualFooter, { static: false }) ftrTmp!: VirtualFooter;
+  @ContentChild(VirtualItem) itmTmp!: VirtualItem;
+  @ContentChild(VirtualHeader) hdrTmp!: VirtualHeader;
+  @ContentChild(VirtualFooter) ftrTmp!: VirtualFooter;
 
   constructor(
-    private z: NgZone,
+    private zone: NgZone,
     private iterableDiffers: IterableDiffers,
     elementRef: ElementRef,
   ) {
@@ -178,7 +162,7 @@ export class IonVirtualScroll {
   }
 
   private nodeRender(el: HTMLElement | null, cell: Cell, index: number): HTMLElement {
-    return this.z.run(() => {
+    return this.zone.run(() => {
       let node: EmbeddedViewRef<VirtualContext>;
       if (!el) {
         node = this.itmTmp.viewContainer.createEmbeddedView(
@@ -210,7 +194,7 @@ export class IonVirtualScroll {
   }
 }
 
-const getElement = (view: EmbeddedViewRef<VirtualContext>): HTMLElement => {
+function getElement(view: EmbeddedViewRef<VirtualContext>): HTMLElement {
   const rootNodes = view.rootNodes;
   for (let i = 0; i < rootNodes.length; i++) {
     if (rootNodes[i].nodeType === 1) {
@@ -218,4 +202,20 @@ const getElement = (view: EmbeddedViewRef<VirtualContext>): HTMLElement => {
     }
   }
   throw new Error('virtual element was not created');
-};
+}
+
+proxyInputs(IonVirtualScroll, [
+  'approxItemHeight',
+  'approxHeaderHeight',
+  'approxFooterHeight',
+  'headerFn',
+  'footerFn',
+  'items',
+  'itemHeight'
+]);
+
+proxyMethods(IonVirtualScroll, [
+  'checkEnd',
+  'checkRange',
+  'positionForItem'
+]);

angular/src/index.ts

@@ -20,6 +20,7 @@ export * from './directives/proxies';
 export { AngularDelegate } from './providers/angular-delegate';
 export { ActionSheetController } from './providers/action-sheet-controller';
 export { AlertController } from './providers/alert-controller';
+export { Events } from './providers/events';
 export { LoadingController } from './providers/loading-controller';
 export { MenuController } from './providers/menu-controller';
 export { PickerController } from './providers/picker-controller';
@@ -30,20 +31,9 @@ export { ToastController } from './providers/toast-controller';
 export { NavController } from './providers/nav-controller';
 export { DomController } from './providers/dom-controller';
 export { Config } from './providers/config';
-export { AnimationController } from './providers/animation-controller';
-export { GestureController } from './providers/gesture-controller';
 
 // ROUTER STRATEGY
 export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';
 
-// TYPES
-export * from './types/ionic-lifecycle-hooks';
-
 // PACKAGE MODULE
 export { IonicModule } from './ionic-module';
-
-// UTILS
-export { IonicSafeString, getPlatforms, isPlatform } from '@ionic/core';
-
-// CORE TYPES
-export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core';

angular/src/ionic-module.ts

@@ -1,5 +1,5 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { IonicConfig } from '@ionic/core';
 
 import { appInitialize } from './app-initialize';
@@ -13,7 +13,7 @@ import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
 import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
-import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
 import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -66,7 +66,9 @@ const DECLARATIONS = [
   IonMenuButton,
   IonMenuToggle,
   IonNav,
-  IonNavLink,
+  IonNavPop,
+  IonNavPush,
+  IonNavSetRoot,
   IonNote,
   IonProgressBar,
   IonRadio,
@@ -126,7 +128,7 @@ const DECLARATIONS = [
   imports: [CommonModule]
 })
 export class IonicModule {
-  static forRoot(config?: IonicConfig): ModuleWithProviders<IonicModule> {
+  static forRoot(config?: IonicConfig): ModuleWithProviders {
     return {
       ngModule: IonicModule,
       providers: [
@@ -140,8 +142,7 @@ export class IonicModule {
           multi: true,
           deps: [
             ConfigToken,
-            DOCUMENT,
-            NgZone
+            DOCUMENT
           ]
         }
       ]

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

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

angular/src/providers/alert-controller.ts

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

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 this.zone.run(() => {
-      return new Promise(resolve => {
+    return new Promise(resolve => {
+      this.zone.run(() => {
         const el = attachView(
-          this.zone, this.resolver, this.injector, this.location, this.appRef,
+          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 this.zone.run(() => {
-      return new Promise(resolve => {
+    return new Promise(resolve => {
+      this.zone.run(() => {
         const componentRef = this.elRefMap.get(component);
         if (componentRef) {
           componentRef.destroy();
@@ -65,8 +65,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   }
 }
 
-export const attachView = (
-  zone: NgZone,
+export function attachView(
   resolver: ComponentFactoryResolver,
   injector: Injector,
   location: ViewContainerRef | undefined,
@@ -74,7 +73,7 @@ export const 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),
@@ -94,7 +93,7 @@ export const attachView = (
       hostElement.classList.add(clazz);
     }
   }
-  const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
+  const unbindEvents = bindLifecycleEvents(instance, hostElement);
   container.appendChild(hostElement);
 
   if (!location) {
@@ -104,7 +103,7 @@ export const attachView = (
   elRefMap.set(hostElement, componentRef);
   elEventsMap.set(hostElement, unbindEvents);
   return hostElement;
-};
+}
 
 const LIFECYCLES = [
   LIFECYCLE_WILL_ENTER,
@@ -114,22 +113,26 @@ const LIFECYCLES = [
   LIFECYCLE_WILL_UNLOAD
 ];
 
-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());
+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);
+    };
   });
-};
+  return () => {
+    unregisters.forEach(fn => fn());
+  };
+}
 
 const NavParamsToken = new InjectionToken<any>('NavParamsToken');
 
-const getProviders = (params: {[key: string]: any}) => {
+function getProviders(params: {[key: string]: any}) {
   return [
     {
       provide: NavParamsToken, useValue: params
@@ -138,8 +141,8 @@ const getProviders = (params: {[key: string]: any}) => {
       provide: NavParams, useFactory: provideNavParamsInjectable, deps: [NavParamsToken]
     }
   ];
-};
+}
 
-const provideNavParamsInjectable = (params: {[key: string]: any}) => {
+function provideNavParamsInjectable(params: {[key: string]: any}) {
   return new NavParams(params);
-};
+}

angular/src/providers/animation-controller.ts

@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Animation, createAnimation, getTimeGivenProgression } from '@ionic/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AnimationController {
-  /**
-   * Create a new animation
-   */
-  create(animationId?: string): Animation {
-    return createAnimation(animationId);
-  }
-
-  /**
-   * EXPERIMENTAL
-   *
-   * Given a progression and a cubic bezier function,
-   * this utility returns the time value(s) at which the
-   * cubic bezier reaches the given time progression.
-   *
-   * If the cubic bezier never reaches the progression
-   * the result will be an empty array.
-   *
-   * This is most useful for switching between easing curves
-   * when doing a gesture animation (i.e. going from linear easing
-   * during a drag, to another easing when `progressEnd` is called)
-   */
-  easingTime(p0: number[], p1: number[], p2: number[], p3: number[], progression: number): number[] {
-    return getTimeGivenProgression(p0, p1, p2, p3, progression);
-  }
-}

angular/src/providers/config.ts

@@ -33,7 +33,6 @@ export class Config {
   }
 
   set(key: keyof IonicConfig, value?: any) {
-    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in Ionic Framework 6.0. Please see https://ionicframework.com/docs/angular/config for alternatives.`);
     const c = getConfig();
     if (c) {
       c.set(key, value);
@@ -43,12 +42,12 @@ export class Config {
 
 export const ConfigToken = new InjectionToken<any>('USERCONFIG');
 
-const getConfig = (): CoreConfig | null => {
+function getConfig(): CoreConfig | null {
   if (typeof (window as any) !== 'undefined') {
-    const Ionic = (window as any as IonicWindow).Ionic;
+    const Ionic = (window as IonicWindow).Ionic;
     if (Ionic && Ionic.config) {
       return Ionic.config;
     }
   }
   return null;
-};
+}

angular/src/providers/dom-controller.ts

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

angular/src/providers/events.ts

@@ -0,0 +1,76 @@
+import { Injectable } from '@angular/core';
+
+export type EventHandler = (...args: any[]) => any;
+@Injectable({
+  providedIn: 'root',
+})
+export class Events {
+  private c = new Map<string, EventHandler[]>();
+
+  /**
+   * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
+   *
+   * @param topic the topic to subscribe to
+   * @param handler the event handler
+   */
+  subscribe(topic: string, ...handlers: EventHandler[]) {
+    let topics = this.c.get(topic);
+    if (!topics) {
+      this.c.set(topic, topics = []);
+    }
+    topics.push(...handlers);
+  }
+
+  /**
+   * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
+   *
+   * @param topic the topic to unsubscribe from
+   * @param handler the event handler
+   *
+   * @return true if a handler was removed
+   */
+  unsubscribe(topic: string, handler?: EventHandler): boolean {
+    if (!handler) {
+      return this.c.delete(topic);
+    }
+
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return false;
+    }
+
+    // We need to find and remove a specific handler
+    const index = topics.indexOf(handler);
+
+    if (index < 0) {
+      // Wasn't found, wasn't removed
+      return false;
+    }
+    topics.splice(index, 1);
+    if (topics.length === 0) {
+      this.c.delete(topic);
+    }
+    return true;
+  }
+
+  /**
+   * Publish an event to the given topic.
+   *
+   * @param topic the topic to publish to
+   * @param eventData the data to send as the event
+   */
+  publish(topic: string, ...args: any[]): any[] | null {
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return null;
+    }
+    return topics.map(handler => {
+      try {
+        return handler(...args);
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    });
+  }
+}

angular/src/providers/gesture-controller.ts

@@ -1,24 +0,0 @@
-import { Injectable, NgZone } from '@angular/core';
-import { Gesture, GestureConfig, createGesture } from '@ionic/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GestureController {
-  constructor(private zone: NgZone) {}
-  /**
-   * Create a new gesture
-   */
-  create(opts: GestureConfig, runInsideAngularZone = false): Gesture {
-    if (runInsideAngularZone) {
-      Object.getOwnPropertyNames(opts).forEach(key => {
-        if (typeof opts[key] === 'function') {
-          const fn = opts[key];
-          opts[key] = (...props) => this.zone.run(() => fn(...props));
-        }
-      });
-    }
-
-    return createGesture(opts);
-  }
-}

angular/src/providers/loading-controller.ts

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

angular/src/providers/menu-controller.ts

@@ -1,18 +1,24 @@
-import { Injectable } from '@angular/core';
-import { menuController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
 
+import { proxyMethod } from '../util/util';
+
+const CTRL = 'ion-menu-controller';
 @Injectable({
   providedIn: 'root',
 })
 export class MenuController {
 
+  constructor(@Inject(DOCUMENT) private doc: any) {
+  }
+
   /**
    * Programmatically open the Menu.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully opened
    */
-  open(menuId?: string) {
-    return menuController.open(menuId);
+  open(menuId?: string): Promise<boolean> {
+    return proxyMethod(CTRL, this.doc, 'open', menuId);
   }
 
   /**
@@ -22,8 +28,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully closed
    */
-  close(menuId?: string) {
-    return menuController.close(menuId);
+  close(menuId?: string): Promise<boolean> {
+    return proxyMethod(CTRL, this.doc, 'close', menuId);
   }
 
   /**
@@ -32,8 +38,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu has been toggled
    */
-  toggle(menuId?: string) {
-    return menuController.toggle(menuId);
+  toggle(menuId?: string): Promise<boolean> {
+    return proxyMethod(CTRL, this.doc, 'toggle', menuId);
   }
 
   /**
@@ -44,8 +50,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  enable(shouldEnable: boolean, menuId?: string) {
-    return menuController.enable(shouldEnable, menuId);
+  enable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
+    return proxyMethod(CTRL, this.doc, 'enable', shouldEnable, menuId);
   }
 
   /**
@@ -54,8 +60,8 @@ export class MenuController {
    * @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) {
-    return menuController.swipeGesture(shouldEnable, menuId);
+  swipeEnable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
+    return proxyMethod(CTRL, this.doc, 'swipeEnable', shouldEnable, menuId);
   }
 
   /**
@@ -63,16 +69,16 @@ export class MenuController {
    * @return Returns true if the specified menu is currently open, otherwise false.
    * If the menuId is not specified, it returns true if ANY menu is currenly open.
    */
-  isOpen(menuId?: string) {
-    return menuController.isOpen(menuId);
+  isOpen(menuId?: string): Promise<boolean> {
+    return proxyMethod(CTRL, this.doc, 'isOpen', menuId);
   }
 
   /**
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns true if the menu is currently enabled, otherwise false.
    */
-  isEnabled(menuId?: string) {
-    return menuController.isEnabled(menuId);
+  isEnabled(menuId?: string): Promise<boolean> {
+    return proxyMethod(CTRL, this.doc, 'isEnabled', menuId);
   }
 
   /**
@@ -84,21 +90,21 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu if found, otherwise `null`.
    */
-  get(menuId?: string) {
-    return menuController.get(menuId);
+  get(menuId?: string): Promise<HTMLIonMenuElement> {
+    return proxyMethod(CTRL, this.doc, 'get', menuId);
   }
 
   /**
    * @return Returns the instance of the menu already opened, otherwise `null`.
    */
-  getOpen() {
-    return menuController.getOpen();
+  getOpen(): Promise<HTMLIonMenuElement> {
+    return proxyMethod(CTRL, this.doc, 'getOpen');
   }
 
   /**
    * @return Returns an array of all menu instances.
    */
-  getMenus() {
-    return menuController.getMenus();
+  getMenus(): Promise<HTMLIonMenuElement[]> {
+    return proxyMethod(CTRL, this.doc, 'getMenus');
   }
 }

angular/src/providers/modal-controller.ts

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

angular/src/providers/nav-controller.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
-import { NavigationExtras, NavigationStart, Router, UrlSerializer, UrlTree } from '@angular/router';
+import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
 import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
@@ -29,7 +29,6 @@ export class NavController {
   constructor(
     platform: Platform,
     private location: Location,
-    private serializer: UrlSerializer,
     @Optional() private router?: Router,
   ) {
     // Subscribe to router events to detect direction
@@ -45,20 +44,17 @@ export class NavController {
     }
 
     // Subscribe to backButton events
-    platform.backButton.subscribeWithPriority(0, processNextHandler => {
-      this.pop();
-      processNextHandler();
-    });
+    platform.backButton.subscribeWithPriority(0, () => this.pop());
   }
 
   /**
    * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
-   * it's equivalent to calling `this.router.navigateByUrl()`, but it's explicit about the **direction** of the transition.
+   * it's equivalent to call `this.router.navigateByUrl()`, but it's explicit about the **direction** of the transition.
    *
-   * Going **forward** means that a new page is going to be pushed to the stack of the outlet (ion-router-outlet),
+   * Going **forward** means that a new page it's 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 triggered in a declarative manner by using the `[routerDirection]` directive:
+   * Navigating forward can also be trigger in a declarative manner by using the `[routerDirection]` directive:
    *
    * ```html
    * <a routerLink="/path/to/page" routerDirection="forward">Link</a>
@@ -71,17 +67,17 @@ export class NavController {
 
   /**
    * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
-   * it's equivalent to calling:
+   * it's equivalent to call:
    *
    * ```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 popped,
+   * Going **back** means that all the pages in the stack until the navigated page is found will be pop,
    * and that it will show a "back" animation by default.
    *
-   * Navigating back can also be triggered in a declarative manner by using the `[routerDirection]` directive:
+   * Navigating back can also be trigger in a declarative manner by using the `[routerDirection]` directive:
    *
    * ```html
    * <a routerLink="/path/to/page" routerDirection="back">Link</a>
@@ -94,7 +90,7 @@ export class NavController {
 
   /**
    * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
-   * it's equivalent to calling:
+   * it's equivalent to call:
    *
    * ```ts
    * this.navController.setDirection('root');
@@ -104,7 +100,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 triggered in a declarative manner by using the `[routerDirection]` directive:
+   * Navigating root can also be trigger in a declarative manner by using the `[routerDirection]` directive:
    *
    * ```html
    * <a routerLink="/path/to/page" routerDirection="root">Link</a>
@@ -117,8 +113,7 @@ 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
-   * by default.
+   * It will use the standard `window.history.back()` under the hood, but featuring a `back` animation.
    */
   back(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
     this.setDirection('back', options.animated, options.animationDirection);
@@ -126,9 +121,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 recursively finds the top active `ion-router-outlet` and calls `pop()`.
+   * It recursivelly 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() {
@@ -144,11 +139,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 some flags to be consumed by `ion-router-outlet`.
+   * `setDirection()` does not trigger any transition, it just sets a set of flags to be consumed by `ion-router-outlet`.
    *
-   * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateRoot()` instead of `setDirection()`.
+   * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateBack()` instead of `setDirection()`.
    */
   setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') {
     this.direction = direction;
@@ -189,34 +184,12 @@ export class NavController {
     if (Array.isArray(url)) {
       return this.router!.navigate(url, options);
     } else {
-
-      /**
-       * navigateByUrl ignores any properties that
-       * would change the url, so things like queryParams
-       * would be ignored unless we create a url tree
-       * More Info: https://github.com/angular/angular/issues/18798
-       */
-      const urlTree = this.serializer.parse(url.toString());
-
-      if (options.queryParams !== undefined) {
-        urlTree.queryParams = { ...options.queryParams };
-      }
-
-      if (options.fragment !== undefined) {
-        urlTree.fragment = options.fragment;
-      }
-
-      /**
-       * `navigateByUrl` will still apply `NavigationExtras` properties
-       * that do not modify the url, such as `replaceUrl` which is why
-       * `options` is passed in here.
-       */
-      return this.router!.navigateByUrl(urlTree, options);
+      return this.router!.navigateByUrl(url, options);
     }
   }
 }
 
-const getAnimation = (direction: RouterDirection, animated: boolean | undefined, animationDirection: 'forward' | 'back' | undefined): NavDirection | undefined => {
+function getAnimation(direction: RouterDirection, animated: boolean | undefined, animationDirection: 'forward' | 'back' | undefined): NavDirection | undefined {
   if (animated === false) {
     return undefined;
   }
@@ -229,7 +202,7 @@ const 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,5 +1,6 @@
-import { Injectable } from '@angular/core';
-import { PickerOptions, pickerController } from '@ionic/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { PickerOptions } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -7,7 +8,7 @@ import { OverlayBaseController } from '../util/overlay';
   providedIn: 'root',
 })
 export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
-  constructor() {
-    super(pickerController);
+  constructor(@Inject(DOCUMENT) doc: any) {
+    super('ion-picker-controller', doc);
   }
 }

angular/src/providers/platform.ts

@@ -1,10 +1,10 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, NgZone } from '@angular/core';
-import { BackButtonEventDetail, KeyboardEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
+import { Inject, Injectable } from '@angular/core';
+import { BackButtonEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { Subject, Subscription } from 'rxjs';
 
 export interface BackButtonEmitter extends Subject<BackButtonEventDetail> {
-  subscribeWithPriority(priority: number, callback: (processNextHandler: () => void) => Promise<any> | void): Subscription;
+  subscribeWithPriority(priority: number, callback: () => Promise<any> | void): Subscription;
 }
 
 @Injectable({
@@ -20,18 +20,6 @@ export class Platform {
    */
   backButton: BackButtonEmitter = new Subject<BackButtonEventDetail>() as any;
 
-  /**
-   * The keyboardDidShow event emits when the
-   * on-screen keyboard is presented.
-   */
-  keyboardDidShow = new Subject<KeyboardEventDetail>() as any;
-
-  /**
-   * The keyboardDidHide event emits when the
-   * on-screen keyboard is hidden.
-   */
-  keyboardDidHide = new Subject<void>();
-
   /**
    * The pause event emits when the native platform puts the application
    * into the background, typically when the user switches to a different
@@ -54,32 +42,29 @@ export class Platform {
    */
   resize = new Subject<void>();
 
-  constructor(@Inject(DOCUMENT) private doc: any, zone: NgZone) {
-    zone.run(() => {
-      this.win = doc.defaultView;
-      this.backButton.subscribeWithPriority = function(priority, callback) {
-        return this.subscribe(ev => {
-          return ev.register(priority, processNextHandler => zone.run(() => callback(processNextHandler)));
-        });
-      };
+  constructor(@Inject(DOCUMENT) private doc: any) {
+    this.win = doc.defaultView;
 
-      proxyEvent(this.pause, doc, 'pause');
-      proxyEvent(this.resume, doc, 'resume');
-      proxyEvent(this.backButton, doc, 'ionBackButton');
-      proxyEvent(this.resize, this.win, 'resize');
-      proxyEvent(this.keyboardDidShow, this.win, 'ionKeyboardDidShow');
-      proxyEvent(this.keyboardDidHide, this.win, 'ionKeyboardDidHide');
+    this.backButton.subscribeWithPriority = function(priority, callback) {
+      return this.subscribe(ev => {
+        ev.register(priority, callback);
+      });
+    };
 
-      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');
-      }
-    });
+    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');
+    }
   }
 
   /**

angular/src/providers/popover-controller.ts

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

angular/src/providers/toast-controller.ts

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

angular/src/schematics/add/index.ts

@@ -2,7 +2,7 @@ import { join, Path } from '@angular-devkit/core';
 import { apply, chain, mergeWith, move, Rule, SchematicContext, SchematicsException, template, Tree, url } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import { addModuleImportToRootModule } from './../utils/ast';
-import { addArchitectBuilder, addAsset, addStyle, getDefaultAngularAppName, getWorkspace, WorkspaceProject, WorkspaceSchema } from './../utils/config';
+import { addArchitectBuilder, addStyle, getWorkspace, addAsset } from './../utils/config';
 import { addPackageToPackageJson } from './../utils/package';
 import { Schema as IonAddOptions } from './schema';
 
@@ -25,7 +25,7 @@ function addIonicAngularToolkitToPackageJson(): Rule {
   };
 }
 
-function addIonicAngularModuleToAppModule(projectSourceRoot: Path): Rule {
+function addIonicAngularModuleToAppModule(projectSourceRoot): Rule {
   return (host: Tree) => {
     addModuleImportToRootModule(
       host,
@@ -37,7 +37,7 @@ function addIonicAngularModuleToAppModule(projectSourceRoot: Path): Rule {
   };
 }
 
-function addIonicStyles(projectName: string, projectSourceRoot: Path): Rule {
+function addIonicStyles(): Rule {
   return (host: Tree) => {
     const ionicStyles = [
       'node_modules/@ionic/angular/css/normalize.css',
@@ -49,49 +49,49 @@ function addIonicStyles(projectName: string, projectSourceRoot: Path): Rule {
       'node_modules/@ionic/angular/css/text-alignment.css',
       'node_modules/@ionic/angular/css/text-transformation.css',
       'node_modules/@ionic/angular/css/flex-utils.css',
-      `${projectSourceRoot}/theme/variables.css`
+      'src/theme/variables.css'
     ].forEach(entry => {
-      addStyle(host, projectName, entry);
+      addStyle(host, entry);
     });
     return host;
   };
 }
 
-function addIonicons(projectName: string): Rule {
+function addIonicons(): Rule {
   return (host: Tree) => {
     const ioniconsGlob = {
       glob: '**/*.svg',
       input: 'node_modules/ionicons/dist/ionicons/svg',
       output: './svg'
     };
-    addAsset(host, projectName, ioniconsGlob);
+    addAsset(host, ioniconsGlob);
     return host;
   };
 }
 
-function addIonicBuilder(projectName: string): Rule {
+function addIonicBuilder(): Rule {
   return (host: Tree) => {
-    addArchitectBuilder(host, projectName, 'ionic-cordova-serve', {
+    addArchitectBuilder(host, 'ionic-cordova-serve', {
       builder: '@ionic/angular-toolkit:cordova-serve',
       options: {
-        cordovaBuildTarget: `${projectName}:ionic-cordova-build`,
-        devServerTarget: `${projectName}:serve`
+        cordovaBuildTarget: 'app:ionic-cordova-build',
+        devServerTarget: 'app:serve'
       },
       configurations: {
         production: {
-          cordovaBuildTarget: `${projectName}:ionic-cordova-build:production`,
-          devServerTarget: `${projectName}:serve:production`
+          cordovaBuildTarget: 'app:ionic-cordova-build:production',
+          devServerTarget: 'app:serve:production'
         }
       }
     });
-    addArchitectBuilder(host, projectName, 'ionic-cordova-build', {
+    addArchitectBuilder(host, 'ionic-cordova-build', {
       builder: '@ionic/angular-toolkit:cordova-build',
       options: {
-        browserTarget: `${projectName}:build`
+        browserTarget: 'app:build'
       },
       configurations: {
         production: {
-          browserTarget: `${projectName}:build:production`
+          browserTarget: 'app:build:production'
         }
       }
     });
@@ -100,24 +100,25 @@ function addIonicBuilder(projectName: string): Rule {
 }
 
 function installNodeDeps() {
-  return (_host: Tree, context: SchematicContext) => {
+  return (host: Tree, context: SchematicContext) => {
     context.addTask(new NodePackageInstallTask());
   };
 }
 
 export default function ngAdd(options: IonAddOptions): Rule {
   return (host: Tree) => {
-    const workspace: WorkspaceSchema = getWorkspace(host);
+    const workspace = getWorkspace(host);
     if (!options.project) {
-      options.project = getDefaultAngularAppName(workspace);
+      options.project = Object.keys(workspace.projects)[0];
     }
-    const project: WorkspaceProject = workspace.projects[options.project];
+    const project = workspace.projects[options.project];
     if (project.projectType !== 'application') {
       throw new SchematicsException(
         `Ionic Add requires a project type of "application".`
       );
     }
-    const sourcePath: Path = join(project.sourceRoot as Path);
+
+    const sourcePath = join(project.root as Path, 'src');
     const rootTemplateSource = apply(url('./files/root'), [
       template({ ...options }),
       move(sourcePath)
@@ -127,9 +128,9 @@ export default function ngAdd(options: IonAddOptions): Rule {
       addIonicAngularToPackageJson(),
       addIonicAngularToolkitToPackageJson(),
       addIonicAngularModuleToAppModule(sourcePath),
-      addIonicBuilder(options.project),
-      addIonicStyles(options.project, sourcePath),
-      addIonicons(options.project),
+      addIonicBuilder(),
+      addIonicStyles(),
+      addIonicons(),
       mergeWith(rootTemplateSource),
       // install freshly added dependencies
       installNodeDeps()

angular/src/schematics/utils/ast.ts

@@ -27,7 +27,7 @@ export function getSourceFile(host: Tree, path: string): ts.SourceFile {
  */
 export function addModuleImportToRootModule(
   host: Tree,
-  projectSourceRoot: string,
+  projectSourceRoot,
   moduleName: string,
   importSrc: string
 ) {

angular/src/schematics/utils/config.ts

@@ -21,7 +21,7 @@ function isAngularBrowserProject(projectConfig: any) {
   return false;
 }
 
-export function getDefaultAngularAppName(config: any): string {
+export function getAngularAppName(config: any): string | null {
   const projects = config.projects;
   const projectNames = Object.keys(projects);
 
@@ -32,52 +32,63 @@ export function getDefaultAngularAppName(config: any): string {
     }
   }
 
-  return projectNames[0];
+  return null;
 }
 
-export function getAngularAppConfig(config: any, projectName: string): any | never {
-  if (!config.projects.hasOwnProperty(projectName)) {
-    throw new SchematicsException(`Could not find project: ${projectName}`);
+export function getAngularAppConfig(config: any): any | null {
+  const projects = config.projects;
+  const projectNames = Object.keys(projects);
+
+  for (const projectName of projectNames) {
+    const projectConfig = projects[projectName];
+    if (isAngularBrowserProject(projectConfig)) {
+      return projectConfig;
+    }
   }
 
-  const projectConfig = config.projects[projectName];
-  if (isAngularBrowserProject(projectConfig)) {
-    return projectConfig;
-  }
+  return null;
+}
 
-  if (config.projectType !== 'application') {
-    throw new SchematicsException(`Invalid projectType for ${projectName}: ${config.projectType}`);
+export function addStyle(host: Tree, stylePath: string) {
+  const config = readConfig(host);
+  const appConfig = getAngularAppConfig(config);
+
+  if (appConfig) {
+    appConfig.architect.build.options.styles.push({
+      input: stylePath
+    });
+
+    writeConfig(host, config);
   } else {
-    const buildConfig = projectConfig.architect.build;
-    throw new SchematicsException(`Invalid builder for ${projectName}: ${buildConfig.builder}`);
+    throw new SchematicsException(`Cannot find valid app`);
   }
 }
 
-export function addStyle(host: Tree, projectName: string, stylePath: string) {
+export function addAsset(host: Tree, asset: string | {glob: string; input: string; output: string}) {
   const config = readConfig(host);
-  const appConfig = getAngularAppConfig(config, projectName);
-  appConfig.architect.build.options.styles.push({
-    input: stylePath
-  });
-  writeConfig(host, config);
+  const appConfig = getAngularAppConfig(config);
+
+  if (appConfig) {
+    appConfig.architect.build.options.assets.push(asset);
+    writeConfig(host, config);
+  } else {
+    throw new SchematicsException(`Cannot find valid app`);
+  }
 }
 
-export function addAsset(host: Tree, projectName: string, asset: string | {glob: string; input: string; output: string}) {
+export function addArchitectBuilder(host: Tree, builderName: string, builderOpts: any){
   const config = readConfig(host);
-  const appConfig = getAngularAppConfig(config, projectName);
-  appConfig.architect.build.options.assets.push(asset);
-  writeConfig(host, config);
-}
+  const appConfig = getAngularAppConfig(config);
 
-export function addArchitectBuilder(host: Tree, projectName: string, builderName: string, builderOpts: any): void | never {
-  const config = readConfig(host);
-  const appConfig = getAngularAppConfig(config, projectName);
-  appConfig.architect[builderName] = builderOpts;
-  writeConfig(host, config);
+  if (appConfig) {
+    appConfig.architect[builderName] = builderOpts
+    writeConfig(host, config);
+  } else {
+    throw new SchematicsException(`Cannot find valid app`);
+  }
 }
 
 export type WorkspaceSchema = experimental.workspace.WorkspaceSchema;
-export type WorkspaceProject = experimental.workspace.WorkspaceProject;
 
 export function getWorkspacePath(host: Tree): string {
   const possibleFiles = ['/angular.json', '/.angular.json'];

angular/src/types/interfaces.ts

@@ -1,15 +1,13 @@
 
 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: FrameRequestCallback) => number;
-}
-
-export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-  forceUpdate(): void;
+  __zone_symbol__requestAnimationFrame: (ts: number) => void;
 }

angular/src/types/ionic-lifecycle-hooks.ts

@@ -1,31 +0,0 @@
-/**
- *  https://ionicframework.com/docs/api/router-outlet#life-cycle-hooks
- */
-
-export interface ViewWillEnter {
-  /**
-   * Fired when the component routing to is about to animate into view.
-   */
-  ionViewWillEnter(): void;
-}
-
-export interface ViewDidEnter {
-  /**
-   * Fired when the component routing to has finished animating.
-   */
-  ionViewDidEnter(): void;
-}
-
-export interface ViewWillLeave {
-  /**
-   * Fired when the component routing from is about to animate.
-   */
-  ionViewWillLeave(): void;
-}
-
-export interface ViewDidLeave {
-  /**
-   * Fired when the component routing to has finished animating.
-   */
-  ionViewDidLeave(): void;
-}

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

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

angular/src/util/util.ts

@@ -1,13 +1,15 @@
 
-declare const __zone_symbol__requestAnimationFrame: any;
-declare const requestAnimationFrame: any;
+export function 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 const raf = (h: any) => {
-  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
-    return __zone_symbol__requestAnimationFrame(h);
+export function ensureElementInBody(elementName: string, doc: Document) {
+  let element = doc.querySelector(elementName);
+  if (!element) {
+    element = doc.createElement(elementName);
+    doc.body.appendChild(element);
   }
-  if (typeof requestAnimationFrame === 'function') {
-    return requestAnimationFrame(h);
-  }
-  return setTimeout(h);
-};
+  return element as HTMLStencilElement;
+}

angular/test/test-app/angular.json

@@ -13,27 +13,18 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
-            "outputPath": "dist/test-app/browser",
+            "outputPath": "dist/test-app",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "buildOptimizer": true,
+            "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
-              }
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
             ],
-            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -59,10 +50,6 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
                 }
               ]
             }
@@ -90,13 +77,37 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "styles": ["src/styles.css"],
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/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": {
@@ -106,63 +117,20 @@
           "configurations": {
             "production": {
               "devServerTarget": "test-app:serve:production"
-            },
-            "ci": {
-              "devServerTarget": "test-app:serve:ci"
             }
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/test-app/server",
-            "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
-          },
-          "configurations": {
-            "production": {
-              "outputHashing": "media",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "sourceMap": false,
-              "optimization": true
-            }
-          }
-        },
-        "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
-          "options": {
-            "browserTarget": "test-app:build",
-            "serverTarget": "test-app:server"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "test-app:build:production",
-              "serverTarget": "test-app:server:production"
-            }
-          }
-        },
-        "prerender": {
-          "builder": "@nguniversal/builders:prerender",
-          "options": {
-            "browserTarget": "test-app:build:production",
-            "serverTarget": "test-app:server:production",
-            "routes": []
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
     }
   },
   "defaultProject": "test-app"
-}
+}

angular/test/test-app/browserslist

@@ -1,12 +0,0 @@
-# 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,35 +1,32 @@
-  // @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: [
-    './src/**/*.e2e-spec.ts'
+    './**/*.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/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 100000,
+    defaultTimeoutInterval: 30000,
     print: function() {}
   },
   onPrepare() {
     require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};

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

@@ -4,13 +4,12 @@ import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
 describe('form', () => {
 
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   describe('change', () => {
     beforeEach(async () => {
       await browser.get('/form');
-      await waitTime(30);
     });
 
     it('should have default values', async () => {
@@ -82,7 +81,6 @@ 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,14 +1,13 @@
 import { browser, element, by } from 'protractor';
-import { getProperty, setProperty, handleErrorMessages, waitTime } from './utils';
+import { getProperty, setProperty, handleErrorMessages } from './utils';
 
 describe('inputs', () => {
 
   beforeEach(async () => {
     await browser.get('/inputs');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should have default value', async () => {
@@ -60,10 +59,4 @@ 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,10 +5,9 @@ describe('modals', () => {
 
   beforeEach(async () => {
     await browser.get('/modals');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should open standalone modal and close', async () => {

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

@@ -4,44 +4,9 @@ import { handleErrorMessages, waitTime, testStack } from './utils';
 describe('navigation', () => {
 
   afterEach(() => {
-    return handleErrorMessages();
+    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);
@@ -57,17 +22,3 @@ 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(() => {
-    return handleErrorMessages();
+    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(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should load all providers', async () => {
@@ -12,9 +12,6 @@ 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,61 +1,13 @@
-import { browser, element, by, protractor } from 'protractor';
-import { waitTime, testStack, testLifeCycle, handleErrorMessages, getText } from './utils';
-
-const EC = protractor.ExpectedConditions;
-
-describe('router-link params and fragments', () => {
-  const queryParam = 'A&=#Y';
-  const fragment = 'myDiv1';
-  const id = 'MyPageID==';
-
-  afterEach(() => {
-    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 waitTime(400);
-    await element(by.css('#goToPage3')).click();
-
-    browser.wait(EC.urlContains('router-link-page3'), 5000);
-    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';
-    browser.wait(EC.urlContains(expectedRoute), 5000);
-  });
-});
+import { browser, element, by } from 'protractor';
+import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
 
 describe('router-link', () => {
 
   beforeEach(async () => {
     await browser.get('/router-link');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
 
@@ -73,6 +25,18 @@ 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 () => {
@@ -113,6 +77,7 @@ 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 () => {
@@ -128,25 +93,21 @@ describe('router-link', () => {
 });
 
 async function testForward() {
-  await waitTime(2500);
+  await waitTime(500);
   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() {
@@ -158,17 +119,6 @@ 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() {
@@ -180,15 +130,4 @@ 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,10 +5,9 @@ describe('slides', () => {
 
   beforeEach(async () => {
     await browser.get('/slides');
-    await waitTime(30);
   });
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
 
   it('should change index on slide change', async () => {

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

@@ -1,14 +1,13 @@
-import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor';
-import { handleErrorMessages, testStack, waitTime } from './utils';
+import { browser, element, by, ElementFinder } from 'protractor';
+import { waitTime, testStack, handleErrorMessages } from './utils';
 
 describe('tabs', () => {
   afterEach(() => {
-    return handleErrorMessages();
+    handleErrorMessages();
   });
   describe('entry url - /tabs', () => {
     beforeEach(async () => {
       await browser.get('/tabs');
-      await waitTime(30);
     });
 
     it('should redirect and load tab-account', async () => {
@@ -17,19 +16,10 @@ describe('tabs', () => {
       await testState(1, 'account');
     });
 
-    it('should navigate between tabs and ionChange events should be dispatched ', async () => {
-      let tab = await testTabTitle('Tab 1 - Page 1');
-      expect(await tab.$('.segment-changed').getText()).toEqual('false');
-
-      await element(by.css('#tab-button-contact')).click();
-      tab = await testTabTitle('Tab 2 - Page 1');
-      expect(await tab.$('.segment-changed').getText()).toEqual('false');
-    });
-
     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 (1)');
+      await testTabTitle('Tab 1 - Page 2');
       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);
@@ -40,7 +30,7 @@ describe('tabs', () => {
       await testState(2, 'contact');
 
       await element(by.css('#tab-button-account')).click();
-      tab = await testTabTitle('Tab 1 - Page 2 (1)');
+      tab = await testTabTitle('Tab 1 - Page 2');
       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);
@@ -54,7 +44,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 (1)');
+      await testTabTitle('Tab 1 - Page 2');
       await testState(1, 'account');
 
       await element(by.css('#tab-button-contact')).click();
@@ -62,7 +52,7 @@ describe('tabs', () => {
       await testState(2, 'contact');
 
       await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
+      await testTabTitle('Tab 1 - Page 2');
       await testState(3, 'account');
 
       await element(by.css('ion-back-button')).click();
@@ -71,33 +61,6 @@ 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');
@@ -112,7 +75,7 @@ describe('tabs', () => {
       const tab = await testTabTitle('Tab 2 - Page 1');
 
       await tab.$('#goto-tab1-page2').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
+      await testTabTitle('Tab 1 - Page 2');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
     });
 
@@ -131,104 +94,15 @@ describe('tabs', () => {
       await testTabTitle('Tab 3 - Page 1');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3']);
     });
-
-    it('should preserve navigation extras when switching tabs', async () => {
-      const expectUrlToContain = 'search=hello#fragment';
-      let tab = await getSelectedTab() as ElementFinder;
-      await tab.$('#goto-nested-page1-with-query-params').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectUrlToContain);
-
-      await element(by.css('#tab-button-contact')).click();
-      await testTabTitle('Tab 2 - Page 1');
-
-      await element(by.css('#tab-button-account')).click();
-      tab = await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectUrlToContain);
-    });
-
-    it('should set root when clicking on an active tab to navigate to the root', async () => {
-      const expectNestedTabUrlToContain = 'search=hello#fragment';
-      let tab = await getSelectedTab() as ElementFinder;
-      const initialUrl = await browser.getCurrentUrl();
-      await tab.$('#goto-nested-page1-with-query-params').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectNestedTabUrlToContain);
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlEquals(initialUrl);
-    });
-
   });
 
-  describe('entry tab contains navigation extras', () => {
-    const expectNestedTabUrlToContain = 'search=hello#fragment';
-    const rootUrlParams = 'test=123#rootFragment';
-    const rootUrl = `/tabs/account?${rootUrlParams}`;
-
+  describe('entry url - /tabs/account/nested/12', () => {
     beforeEach(async () => {
-      await browser.get(rootUrl);
-      await waitTime(30);
-    });
-
-    it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', async () => {
-      await browser.get(rootUrl);
-
-      let tab = await getSelectedTab() as ElementFinder;
-      await tab.$('#goto-nested-page1-with-query-params').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectNestedTabUrlToContain);
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlContains(rootUrl);
-    });
-
-    it('should preserve root url navigation extras when changing tabs', async () => {
-      await browser.get(rootUrl);
-
-      let tab = await getSelectedTab() as ElementFinder;
-      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 1');
-
-      await testUrlContains(rootUrl);
-    });
-
-    it('should navigate deep then go home and preserve navigation extras', 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 element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlContains(rootUrl);
-    });
-  });
-
-  describe('entry url - /tabs/account/nested/1', () => {
-    beforeEach(async () => {
-      await browser.get('/tabs/account/nested/1');
-      await waitTime(30);
+      await browser.get('/tabs/account/nested/12');
     });
 
     it('should only display the back-button when there is a page in the stack', async () => {
-      let tab = await testTabTitle('Tab 1 - Page 2 (1)') as ElementFinder;
+      let tab = await testTabTitle('Tab 1 - Page 2') as ElementFinder;
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
 
@@ -236,38 +110,14 @@ describe('tabs', () => {
       tab = await testTabTitle('Tab 1 - Page 1');
 
       await tab.$('#goto-tab1-page2').click();
-      tab = await testTabTitle('Tab 1 - Page 2 (1)');
+      tab = await testTabTitle('Tab 1 - Page 2');
       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 () => {
@@ -275,7 +125,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 (1)');
+      tab = await testTabTitle('Tab 1 - Page 2');
       await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3', 'app-tabs-tab1-nested']);
       expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
     });
@@ -284,14 +134,12 @@ 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'));
@@ -314,18 +162,6 @@ async function testTabTitle(title: string) {
   return tab;
 }
 
-async function testUrlContains(urlFragment: string) {
-  await browser.wait(ExpectedConditions.urlContains(urlFragment),
-    5000,
-    `expected ${browser.getCurrentUrl()} to contain ${urlFragment}`);
-}
-
-async function testUrlEquals(url: string) {
-  await browser.wait(ExpectedConditions.urlIs(url),
-    5000,
-    `expected ${browser.getCurrentUrl()} to equal ${url}`);
-}
-
 async function getSelectedTab(): Promise<ElementFinder> {
   const tabs = element.all(by.css('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)'));
   expect(await tabs.count()).toEqual(1);

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

@@ -37,30 +37,29 @@ export interface LifeCycleCount {
 }
 
 export function handleErrorMessages() {
-  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);
-      }
+  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;
+        }
     }
+
+    expect(severWarnings).toBe(false);
   });
 }
 
 export async function testLifeCycle(selector: string, expected: LifeCycleCount) {
   await waitTime(50);
-  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());
+  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());
 }
 
 export async function testStack(selector: string, expected: string[]) {

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

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

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

@@ -1,18 +0,0 @@
-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,63 +1,51 @@
 {
-  "name": "ionic-angular-test-app",
+  "name": "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": "npm run sync && ng build --prod --no-progress",
+    "build": "ng build --prod --no-progress",
     "test": "ng e2e --prod",
-    "test.dev": "npm run sync && ng e2e",
     "lint": "ng lint",
-    "postinstall": "npm run sync && ngcc",
-    "serve:ssr": "node dist/test-app/server/main.js",
-    "build:ssr": "ng build --prod && ng run test-app:server:production",
-    "dev:ssr": "ng run test-app:serve-ssr",
-    "prerender": "ng run test-app:prerender"
+    "postinstall": "npm run sync"
   },
+  "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.0-rc.2",
-    "@angular/common": "^9.0.0-rc.2",
-    "@angular/compiler": "^9.0.0-rc.2",
-    "@angular/core": "^9.0.0-rc.2",
-    "@angular/forms": "^9.0.0-rc.2",
-    "@angular/platform-browser": "^9.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.2",
-    "@angular/platform-server": "^9.0.0-rc.2",
-    "@angular/router": "^9.0.0-rc.2",
-    "@ionic/angular": "^4.7.0",
-    "@ionic/angular-server": "^0.0.2",
-    "@nguniversal/express-engine": "9.0.0-next.9",
+    "@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",
     "core-js": "^2.6.2",
-    "express": "^4.15.2",
-    "rxjs": "^6.5.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "rxjs": "~6.3.3",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.2",
-    "@angular/cli": "^9.0.0-rc.2",
-    "@angular/compiler-cli": "^9.0.0-rc.2",
-    "@angular/language-service": "^9.0.0-rc.2",
-    "@nguniversal/builders": "9.0.0-next.9",
-    "@types/express": "^4.17.0",
-    "@types/jasmine": "3.4.1",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
+    "@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",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
+    "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",
     "protractor": "~5.4.2",
-    "ts-loader": "^6.1.2",
-    "ts-node": "8.4.1",
-    "tslint": "~5.18.0",
-    "typescript": "~3.6.4",
-    "webpack-cli": "^3.3.9"
+    "ts-node": "~7.0.0",
+    "tslint": "~5.12.1",
+    "typescript": "~3.2.4"
   }
 }

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

@@ -10,14 +10,6 @@ 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,20 +1,14 @@
 # Copy angular dist
-rm -rf node_modules/@ionic/angular
-cp -a ../../dist node_modules/@ionic/angular
+rm -rf node_modules/@ionic/angular/dist
+cp -a ../../dist node_modules/@ionic/angular/dist
+cp -a ../../package.json node_modules/@ionic/angular/package.json
 
-# Copy angular server
-rm -rf node_modules/@ionic/angular-server
-cp -a ../../../packages/angular-server/dist node_modules/@ionic/angular-server
-
-# # Copy core dist
-rm -rf node_modules/@ionic/core
-mkdir node_modules/@ionic/core
-cp -a ../../../core/css node_modules/@ionic/core/css
+# Copy core dist
+rm -rf node_modules/@ionic/core/dist
 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

@@ -1,57 +0,0 @@
-import 'zone.js/dist/zone-node';
-
-import { ngExpressEngine } from '@nguniversal/express-engine';
-import * as express from 'express';
-import { join } from 'path';
-
-import { AppServerModule } from './src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
-
-// The Express app is exported so that it can be used by serverless Functions.
-export function app() {
-  const server = express();
-  const distFolder = join(process.cwd(), 'dist/test-app/browser');
-
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
-
-  server.set('view engine', 'html');
-  server.set('views', distFolder);
-
-  // Example Express Rest API endpoints
-  // app.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
-  });
-
-  return server;
-}
-
-function run() {
-  const port = process.env.PORT || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-if (mainModule && mainModule.filename === __filename) {
-  run();
-}
-
-export * from './src/main.server';

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

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

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

@@ -1,39 +0,0 @@
-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

@@ -4,9 +4,11 @@ import { InputsComponent } from './inputs/inputs.component';
 import { ModalComponent } from './modal/modal.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
-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';
@@ -19,11 +21,9 @@ 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 },
@@ -31,8 +31,6 @@ const routes: Routes = [
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },
   { path: 'router-link-page', component: RouterLinkPageComponent },
-  { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
-  { path: 'router-link-page3', component: RouterLinkPage3Component },
   { path: 'slides', component: SlidesComponent },
   { path: 'virtual-scroll', component: VirtualScrollComponent },
   { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
@@ -47,7 +45,40 @@ const routes: Routes = [
   },
   {
     path: 'tabs',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+    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'
+      }
+    ]
   },
   {
     path: 'nested-outlet',

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

@@ -1,20 +1,21 @@
 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, IonicRouteStrategy } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { InputsComponent } from './inputs/inputs.component';
 import { ModalComponent } from './modal/modal.component';
 import { ModalExampleComponent } from './modal-example/modal-example.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
-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';
@@ -29,7 +30,6 @@ 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: [
@@ -39,9 +39,11 @@ import { AlertComponent } from './alert/alert.component';
     ModalExampleComponent,
     RouterLinkComponent,
     RouterLinkPageComponent,
-    RouterLinkPage2Component,
-    RouterLinkPage3Component,
     HomePageComponent,
+    TabsComponent,
+    TabsTab1Component,
+    TabsTab2Component,
+    TabsTab1NestedComponent,
     VirtualScrollComponent,
     VirtualScrollDetailComponent,
     VirtualScrollInnerComponent,
@@ -55,11 +57,10 @@ import { AlertComponent } from './alert/alert.component';
     FormComponent,
     NavigationPage1Component,
     NavigationPage2Component,
-    NavigationPage3Component,
-    AlertComponent
+    NavigationPage3Component
   ],
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserModule,
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
@@ -69,9 +70,7 @@ import { AlertComponent } from './alert/alert.component';
     ModalExampleComponent,
     NavComponent
   ],
-  providers: [
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-  ],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -1,15 +0,0 @@
-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';
-
-@NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-    IonicServerModule
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppServerModule {}

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

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

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

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

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

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

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -8,7 +8,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content padding>
   <h1>Value</h1>
   <h2>{{value}}</h2>
   <h3>{{valueFromParams}}</h3>