refactor(angular): move to packages directory (#27719)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `angular` directory sits at the root of the project instead of in
`packages` with all the other JS Framework integrations. This does not
cause any functional issues with Ionic, but it is confusing since
integrations are not in a consistent place.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Moves the `angular` directory to `packages/angular`

Note: Most files should remain unchanged. The only files I changed are
the files that had direct paths to the old `angular` directory:

1. Removes the `angular` path in `lerna.json`. This is now covered by
`packages/*`
2. Updated the angular file path in `.gitignore`
3. Updates the path to the angular package in `stencil.config.ts` for
the Angular Output Targets
4. Updates some of Angular's sync scripts to correctly get the core
stylesheets as well as the core package.
5. Updates the test app sync script to correctly sync core and
angular-server

~I'm not entirely sure why GitHub thinks
https://github.com/ionic-team/ionic-framework/pull/27719/files#diff-f5bba7e7c7c75426e2b9c89868310cb03890493b4efe0252adf8d12cc8398962
is a new file since it exists in `main` here:
1f06be4a31/angular/test/base/scripts/build-ionic.sh~
Fixed in
6e7fc49827

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.1.2-dev.11688052109.13454f5c`

packages/angular/src/app-initialize.ts

@@ -0,0 +1,39 @@
+import { NgZone } from '@angular/core';
+import { setupConfig } from '@ionic/core';
+import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
+
+import { Config } from './providers/config';
+import { IonicWindow } from './types/interfaces';
+import { raf } from './util/util';
+
+// TODO(FW-2827): types
+
+export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
+  return (): any => {
+    const win: IonicWindow | undefined = doc.defaultView as any;
+    if (win && typeof (window as any) !== 'undefined') {
+      setupConfig({
+        ...config,
+        _zoneGate: (h: any) => zone.run(h),
+      });
+
+      const aelFn =
+        '__zone_symbol__addEventListener' in (doc.body as any) ? '__zone_symbol__addEventListener' : 'addEventListener';
+
+      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);
+          },
+        });
+      });
+    }
+  };
+};

packages/angular/src/directives/angular-component-lib/utils.ts

@@ -0,0 +1,57 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+
+export const 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));
+      },
+    });
+  });
+};
+
+export const 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));
+    };
+  });
+};
+
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
+    }
+    return cls;
+  };
+  return decorator;
+}

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

@@ -0,0 +1,30 @@
+import { Directive, HostListener, ElementRef, Injector } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor, setIonicClasses } from './value-accessor';
+
+@Directive({
+  selector: 'ion-checkbox,ion-toggle',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class BooleanValueAccessorDirective extends ValueAccessor {
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
+  }
+
+  writeValue(value: boolean): void {
+    this.el.nativeElement.checked = this.lastValue = value;
+    setIonicClasses(this.el);
+  }
+
+  @HostListener('ionChange', ['$event.target'])
+  _handleIonChange(el: HTMLIonCheckboxElement | HTMLIonToggleElement): void {
+    this.handleValueChange(el, el.checked);
+  }
+}

packages/angular/src/directives/control-value-accessors/index.ts

@@ -0,0 +1,5 @@
+export * from './boolean-value-accessor';
+export * from './numeric-value-accessor';
+export * from './radio-value-accessor';
+export * from './select-value-accessor';
+export * from './text-value-accessor';

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

@@ -0,0 +1,31 @@
+import { Directive, HostListener, ElementRef, Injector } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  selector: 'ion-input[type=number]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumericValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class NumericValueAccessorDirective extends ValueAccessor {
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
+  }
+
+  @HostListener('ionInput', ['$event.target'])
+  handleInputEvent(el: HTMLIonInputElement): void {
+    this.handleValueChange(el, el.value);
+  }
+
+  registerOnChange(fn: (_: number | null) => void): void {
+    super.registerOnChange((value: string) => {
+      fn(value === '' ? null : parseFloat(value));
+    });
+  }
+}

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

@@ -0,0 +1,27 @@
+import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-radio',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class RadioValueAccessorDirective extends ValueAccessor {
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
+  }
+
+  // TODO(FW-2827): type (HTMLIonRadioElement and HTMLElement are both missing `checked`)
+  @HostListener('ionSelect', ['$event.target'])
+  _handleIonSelect(el: any): void {
+    this.handleValueChange(el, el.checked);
+  }
+}

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

@@ -0,0 +1,33 @@
+import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class SelectValueAccessorDirective extends ValueAccessor {
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
+  }
+
+  @HostListener('ionChange', ['$event.target'])
+  _handleChangeEvent(
+    el:
+      | HTMLIonRangeElement
+      | HTMLIonSelectElement
+      | HTMLIonRadioGroupElement
+      | HTMLIonSegmentElement
+      | HTMLIonDatetimeElement
+  ): void {
+    this.handleValueChange(el, el.value);
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class TextValueAccessorDirective extends ValueAccessor {
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
+  }
+
+  @HostListener('ionInput', ['$event.target'])
+  _handleInputEvent(el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement): void {
+    this.handleValueChange(el, el.value);
+  }
+}

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

@@ -0,0 +1,150 @@
+import { AfterViewInit, ElementRef, Injector, OnDestroy, Directive, HostListener } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+import { raf } from '../../util/util';
+
+// TODO(FW-2827): types
+
+@Directive()
+export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {
+  private onChange: (value: any) => void = () => {
+    /**/
+  };
+  private onTouched: () => void = () => {
+    /**/
+  };
+  protected lastValue: any;
+  private statusChanges?: Subscription;
+
+  constructor(protected injector: Injector, protected el: ElementRef) {}
+
+  writeValue(value: any): void {
+    this.el.nativeElement.value = this.lastValue = value;
+    setIonicClasses(this.el);
+  }
+
+  /**
+   * Notifies the ControlValueAccessor of a change in the value of the control.
+   *
+   * This is called by each of the ValueAccessor directives when we want to update
+   * the status and validity of the form control. For example with text components this
+   * is called when the ionInput event is fired. For select components this is called
+   * when the ionChange event is fired.
+   *
+   * This also updates the Ionic form status classes on the element.
+   *
+   * @param el The component element.
+   * @param value The new value of the control.
+   */
+  handleValueChange(el: HTMLElement, value: any): void {
+    if (el === this.el.nativeElement) {
+      if (value !== this.lastValue) {
+        this.lastValue = value;
+        this.onChange(value);
+      }
+      setIonicClasses(this.el);
+    }
+  }
+
+  @HostListener('ionBlur', ['$event.target'])
+  _handleBlurEvent(el: any): void {
+    if (el === this.el.nativeElement) {
+      this.onTouched();
+      setIonicClasses(this.el);
+    }
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+
+  ngOnDestroy(): void {
+    if (this.statusChanges) {
+      this.statusChanges.unsubscribe();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    let ngControl;
+    try {
+      ngControl = this.injector.get<NgControl>(NgControl);
+    } catch {
+      /* No FormControl or ngModel binding */
+    }
+
+    if (!ngControl) {
+      return;
+    }
+
+    // Listen for changes in validity, disabled, or pending states
+    if (ngControl.statusChanges) {
+      this.statusChanges = ngControl.statusChanges.subscribe(() => setIonicClasses(this.el));
+    }
+
+    /**
+     * TODO FW-2787: Remove this in favor of https://github.com/angular/angular/issues/10887
+     * whenever it is implemented.
+     */
+    const formControl = ngControl.control as any;
+    if (formControl) {
+      const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
+      methodsToPatch.forEach((method) => {
+        if (typeof formControl[method] !== 'undefined') {
+          const oldFn = formControl[method].bind(formControl);
+          formControl[method] = (...params: any[]) => {
+            oldFn(...params);
+            setIonicClasses(this.el);
+          };
+        }
+      });
+    }
+  }
+}
+
+export const setIonicClasses = (element: ElementRef): void => {
+  raf(() => {
+    const input = element.nativeElement as HTMLInputElement;
+    const hasValue = input.value != null && input.value.toString().length > 0;
+    const classes = getClasses(input);
+    setClasses(input, classes);
+    const item = input.closest('ion-item');
+    if (item) {
+      if (hasValue) {
+        setClasses(item, [...classes, 'item-has-value']);
+      } else {
+        setClasses(item, classes);
+      }
+    }
+  });
+};
+
+const getClasses = (element: HTMLElement) => {
+  const classList = element.classList;
+  const classes = [];
+  for (let i = 0; i < classList.length; i++) {
+    const item = classList.item(i);
+    if (item !== null && startsWith(item, 'ng-')) {
+      classes.push(`ion-${item.substring(3)}`);
+    }
+  }
+  return classes;
+};
+
+const setClasses = (element: HTMLElement, classes: string[]) => {
+  const classList = element.classList;
+  classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
+  classList.add(...classes);
+};
+
+const startsWith = (input: string, search: string): boolean => {
+  return input.substring(0, search.length) === search;
+};

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

@@ -0,0 +1,41 @@
+import { Directive, HostListener, Input, Optional } from '@angular/core';
+import { AnimationBuilder } from '@ionic/core';
+
+import { Config } from '../../providers/config';
+import { NavController } from '../../providers/nav-controller';
+
+import { IonRouterOutlet } from './ion-router-outlet';
+
+@Directive({
+  selector: 'ion-back-button',
+})
+export class IonBackButtonDelegateDirective {
+  @Input()
+  defaultHref: string | undefined | null;
+
+  @Input()
+  routerAnimation?: AnimationBuilder;
+
+  constructor(
+    @Optional() private routerOutlet: IonRouterOutlet,
+    private navCtrl: NavController,
+    private config: Config
+  ) {}
+
+  /**
+   * @internal
+   */
+  @HostListener('click', ['$event'])
+  onClick(ev: Event): void {
+    const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');
+
+    if (this.routerOutlet?.canGoBack()) {
+      this.navCtrl.setDirection('back', undefined, undefined, this.routerAnimation);
+      this.routerOutlet.pop();
+      ev.preventDefault();
+    } else if (defaultHref != null) {
+      this.navCtrl.navigateBack(defaultHref, { animation: this.routerAnimation });
+      ev.preventDefault();
+    }
+  }
+}

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

@@ -0,0 +1,417 @@
+import { Location } from '@angular/common';
+import {
+  ComponentRef,
+  ElementRef,
+  Injector,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewContainerRef,
+  inject,
+  Attribute,
+  Directive,
+  EventEmitter,
+  Optional,
+  Output,
+  SkipSelf,
+  EnvironmentInjector,
+} from '@angular/core';
+import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Data } from '@angular/router';
+import { componentOnReady } from '@ionic/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
+
+import { AnimationBuilder } from '../../ionic-core';
+import { Config } from '../../providers/config';
+import { NavController } from '../../providers/nav-controller';
+
+import { StackController } from './stack-controller';
+import { RouteView, getUrl } from './stack-utils';
+
+// TODO(FW-2827): types
+
+@Directive({
+  selector: 'ion-router-outlet',
+  exportAs: 'outlet',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['animated', 'animation', 'mode', 'swipeGesture'],
+})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class IonRouterOutlet implements OnDestroy, OnInit {
+  nativeEl: HTMLIonRouterOutletElement;
+
+  private activated: ComponentRef<any> | null = null;
+  activatedView: RouteView | null = null;
+
+  private _activatedRoute: ActivatedRoute | null = null;
+  private _swipeGesture?: boolean;
+  private name: string;
+  private stackCtrl: StackController;
+
+  // Maintain map of activated route proxies for each component instance
+  private proxyMap = new WeakMap<any, ActivatedRoute>();
+
+  // Keep the latest activated route in a subject for the proxy routes to switch map to
+  private currentActivatedRoute$ = new BehaviorSubject<{ component: any; activatedRoute: ActivatedRoute } | null>(null);
+
+  tabsPrefix: string | undefined;
+
+  @Output() stackEvents = new EventEmitter<any>();
+  // eslint-disable-next-line @angular-eslint/no-output-rename
+  @Output('activate') activateEvents = new EventEmitter<any>();
+  // eslint-disable-next-line @angular-eslint/no-output-rename
+  @Output('deactivate') deactivateEvents = new EventEmitter<any>();
+
+  private parentContexts = inject(ChildrenOutletContexts);
+  private location = inject(ViewContainerRef);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  // Ionic providers
+  private config = inject(Config);
+  private navCtrl = inject(NavController);
+
+  set animation(animation: AnimationBuilder) {
+    this.nativeEl.animation = animation;
+  }
+
+  set animated(animated: boolean) {
+    this.nativeEl.animated = animated;
+  }
+
+  set swipeGesture(swipe: boolean) {
+    this._swipeGesture = swipe;
+
+    this.nativeEl.swipeHandler = swipe
+      ? {
+          canStart: () => this.stackCtrl.canGoBack(1) && !this.stackCtrl.hasRunningTask(),
+          onStart: () => this.stackCtrl.startBackTransition(),
+          onEnd: (shouldContinue) => this.stackCtrl.endBackTransition(shouldContinue),
+        }
+      : undefined;
+  }
+
+  constructor(
+    @Attribute('name') name: string,
+    @Optional() @Attribute('tabs') tabs: string,
+    commonLocation: Location,
+    elementRef: ElementRef,
+    router: Router,
+    zone: NgZone,
+    activatedRoute: ActivatedRoute,
+    @SkipSelf() @Optional() readonly parentOutlet?: IonRouterOutlet
+  ) {
+    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, this.navCtrl, zone, commonLocation);
+    this.parentContexts.onChildOutletCreated(this.name, this as any);
+  }
+
+  ngOnDestroy(): void {
+    this.stackCtrl.destroy();
+  }
+
+  getContext(): OutletContext | null {
+    return this.parentContexts.getContext(this.name);
+  }
+
+  ngOnInit(): void {
+    this.initializeOutletWithName();
+  }
+
+  // Note: Ionic deviates from the Angular Router implementation here
+  private initializeOutletWithName() {
+    if (!this.activated) {
+      // If the outlet was not instantiated at the time the route got activated we need to populate
+      // the outlet when it is initialized (ie inside a NgIf)
+      const context = this.getContext();
+      if (context?.route) {
+        this.activateWith(context.route, context.injector);
+      }
+    }
+
+    new Promise((resolve) => componentOnReady(this.nativeEl, resolve)).then(() => {
+      if (this._swipeGesture === undefined) {
+        this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
+      }
+    });
+  }
+
+  get isActivated(): boolean {
+    return !!this.activated;
+  }
+
+  get component(): Record<string, unknown> {
+    if (!this.activated) {
+      throw new Error('Outlet is not activated');
+    }
+    return this.activated.instance;
+  }
+
+  get activatedRoute(): ActivatedRoute {
+    if (!this.activated) {
+      throw new Error('Outlet is not activated');
+    }
+    return this._activatedRoute as ActivatedRoute;
+  }
+
+  get activatedRouteData(): Data {
+    if (this._activatedRoute) {
+      return this._activatedRoute.snapshot.data;
+    }
+    return {};
+  }
+
+  /**
+   * Called when the `RouteReuseStrategy` instructs to detach the subtree
+   */
+  detach(): ComponentRef<any> {
+    throw new Error('incompatible reuse strategy');
+  }
+
+  /**
+   * Called when the `RouteReuseStrategy` instructs to re-attach a previously detached subtree
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  attach(_ref: ComponentRef<any>, _activatedRoute: ActivatedRoute): void {
+    throw new Error('incompatible reuse strategy');
+  }
+
+  deactivate(): void {
+    if (this.activated) {
+      if (this.activatedView) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const context = this.getContext()!;
+        this.activatedView.savedData = new Map(context.children['contexts']);
+
+        /**
+         * Angular v11.2.10 introduced a change
+         * where this route context is cleared out when
+         * a router-outlet is deactivated, However,
+         * we need this route information in order to
+         * return a user back to the correct tab when
+         * leaving and then going back to the tab context.
+         */
+        const primaryOutlet = this.activatedView.savedData.get('primary');
+        if (primaryOutlet && context.route) {
+          primaryOutlet.route = { ...context.route };
+        }
+
+        /**
+         * Ensure we are saving the NavigationExtras
+         * data otherwise it will be lost
+         */
+        this.activatedView.savedExtras = {};
+        if (context.route) {
+          const contextSnapshot = context.route.snapshot;
+
+          this.activatedView.savedExtras.queryParams = contextSnapshot.queryParams;
+          (this.activatedView.savedExtras.fragment as string | null) = contextSnapshot.fragment;
+        }
+      }
+      const c = this.component;
+      this.activatedView = null;
+      this.activated = null;
+      this._activatedRoute = null;
+      this.deactivateEvents.emit(c);
+    }
+  }
+
+  activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector | null): void {
+    if (this.isActivated) {
+      throw new Error('Cannot activate an already activated outlet');
+    }
+    this._activatedRoute = activatedRoute;
+
+    let cmpRef: any;
+    let enteringView = this.stackCtrl.getExistingView(activatedRoute);
+    if (enteringView) {
+      cmpRef = this.activated = enteringView.ref;
+      const saved = enteringView.savedData;
+      if (saved) {
+        // self-restore
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const context = this.getContext()!;
+        context.children['contexts'] = saved;
+      }
+      // Updated activated route proxy for this component
+      this.updateActivatedRouteProxy(cmpRef.instance, activatedRoute);
+    } else {
+      const snapshot = (activatedRoute as any)._futureSnapshot;
+
+      /**
+       * Angular 14 introduces a new `loadComponent` property to the route config.
+       * This function will assign a `component` property to the route snapshot.
+       * We check for the presence of this property to determine if the route is
+       * using standalone components.
+       */
+      const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
+
+      // We create an activated route proxy object that will maintain future updates for this component
+      // over its lifecycle in the stack.
+      const component$ = new BehaviorSubject<any>(null);
+      const activatedRouteProxy = this.createActivatedRouteProxy(component$, activatedRoute);
+
+      const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const component = snapshot.routeConfig!.component ?? snapshot.component;
+
+      cmpRef = this.activated = this.location.createComponent(component, {
+        index: this.location.length,
+        injector,
+        environmentInjector: environmentInjector ?? this.environmentInjector,
+      });
+
+      // Once the component is created we can push it to our local subject supplied to the proxy
+      component$.next(cmpRef.instance);
+
+      // Calling `markForCheck` to make sure we will run the change detection when the
+      // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
+      enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
+
+      // Store references to the proxy by component
+      this.proxyMap.set(cmpRef.instance, activatedRouteProxy);
+      this.currentActivatedRoute$.next({ component: cmpRef.instance, activatedRoute });
+    }
+
+    this.activatedView = enteringView;
+
+    /**
+     * The top outlet is set prior to the entering view's transition completing,
+     * so that when we have nested outlets (e.g. ion-tabs inside an ion-router-outlet),
+     * the tabs outlet will be assigned as the top outlet when a view inside tabs is
+     * activated.
+     *
+     * In this scenario, activeWith is called for both the tabs and the root router outlet.
+     * To avoid a race condition, we assign the top outlet synchronously.
+     */
+    this.navCtrl.setTopOutlet(this);
+
+    this.stackCtrl.setActive(enteringView).then((data) => {
+      this.activateEvents.emit(cmpRef.instance);
+      this.stackEvents.emit(data);
+    });
+  }
+
+  /**
+   * Returns `true` if there are pages in the stack to go back.
+   */
+  canGoBack(deep = 1, stackId?: string): boolean {
+    return this.stackCtrl.canGoBack(deep, stackId);
+  }
+
+  /**
+   * Resolves to `true` if it the outlet was able to sucessfully pop the last N pages.
+   */
+  pop(deep = 1, stackId?: string): Promise<boolean> {
+    return this.stackCtrl.pop(deep, stackId);
+  }
+
+  /**
+   * Returns the URL of the active page of each stack.
+   */
+  getLastUrl(stackId?: string): string | undefined {
+    const active = this.stackCtrl.getLastUrl(stackId);
+    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.
+   */
+  getActiveStackId(): string | undefined {
+    return this.stackCtrl.getActiveStackId();
+  }
+
+  /**
+   * Since the activated route can change over the life time of a component in an ion router outlet, we create
+   * a proxy so that we can update the values over time as a user navigates back to components already in the stack.
+   */
+  private createActivatedRouteProxy(component$: Observable<any>, activatedRoute: ActivatedRoute): ActivatedRoute {
+    const proxy: any = new ActivatedRoute();
+
+    proxy._futureSnapshot = (activatedRoute as any)._futureSnapshot;
+    proxy._routerState = (activatedRoute as any)._routerState;
+    proxy.snapshot = activatedRoute.snapshot;
+    proxy.outlet = activatedRoute.outlet;
+    proxy.component = activatedRoute.component;
+
+    // Setup wrappers for the observables so consumers don't have to worry about switching to new observables as the state updates
+    (proxy as any)._paramMap = this.proxyObservable(component$, 'paramMap');
+    (proxy as any)._queryParamMap = this.proxyObservable(component$, 'queryParamMap');
+    proxy.url = this.proxyObservable(component$, 'url');
+    proxy.params = this.proxyObservable(component$, 'params');
+    proxy.queryParams = this.proxyObservable(component$, 'queryParams');
+    proxy.fragment = this.proxyObservable(component$, 'fragment');
+    proxy.data = this.proxyObservable(component$, 'data');
+
+    return proxy as ActivatedRoute;
+  }
+
+  /**
+   * Create a wrapped observable that will switch to the latest activated route matched by the given component
+   */
+  private proxyObservable(component$: Observable<any>, path: string): Observable<any> {
+    return component$.pipe(
+      // First wait until the component instance is pushed
+      filter((component) => !!component),
+      switchMap((component) =>
+        this.currentActivatedRoute$.pipe(
+          filter((current) => current !== null && current.component === component),
+          switchMap((current) => current && (current.activatedRoute as any)[path]),
+          distinctUntilChanged()
+        )
+      )
+    );
+  }
+
+  /**
+   * Updates the activated route proxy for the given component to the new incoming router state
+   */
+  private updateActivatedRouteProxy(component: any, activatedRoute: ActivatedRoute): void {
+    const proxy = this.proxyMap.get(component);
+    if (!proxy) {
+      throw new Error(`Could not find activated route proxy for view`);
+    }
+
+    (proxy as any)._futureSnapshot = (activatedRoute as any)._futureSnapshot;
+    (proxy as any)._routerState = (activatedRoute as any)._routerState;
+    proxy.snapshot = activatedRoute.snapshot;
+    proxy.outlet = activatedRoute.outlet;
+    proxy.component = activatedRoute.component;
+
+    this.currentActivatedRoute$.next({ component, activatedRoute });
+  }
+}
+
+class OutletInjector implements Injector {
+  constructor(private route: ActivatedRoute, private childContexts: ChildrenOutletContexts, private parent: Injector) {}
+
+  get(token: any, notFoundValue?: any): any {
+    if (token === ActivatedRoute) {
+      return this.route;
+    }
+
+    if (token === ChildrenOutletContexts) {
+      return this.childContexts;
+    }
+
+    return this.parent.get(token, notFoundValue);
+  }
+}

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

@@ -0,0 +1,211 @@
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  Component,
+  ContentChild,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Output,
+  QueryList,
+  ViewChild,
+} from '@angular/core';
+
+import { NavController } from '../../providers/nav-controller';
+import { IonTabBar } from '../proxies';
+
+import { IonRouterOutlet } from './ion-router-outlet';
+import { StackEvent } from './stack-utils';
+
+@Component({
+  selector: 'ion-tabs',
+  template: `
+    <ng-content select="[slot=top]"></ng-content>
+    <div class="tabs-inner" #tabsInner>
+      <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
+    </div>
+    <ng-content></ng-content>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        flex-direction: column;
+
+        width: 100%;
+        height: 100%;
+
+        contain: layout size style;
+      }
+      .tabs-inner {
+        position: relative;
+
+        flex: 1;
+
+        contain: layout size style;
+      }
+    `,
+  ],
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class IonTabs implements AfterContentInit, AfterContentChecked {
+  @ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
+  @ViewChild('tabsInner', { read: ElementRef, static: true }) tabsInner: ElementRef<HTMLDivElement>;
+
+  @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
+  @ContentChildren(IonTabBar) tabBars: QueryList<IonTabBar>;
+
+  @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
+  @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
+
+  private tabBarSlot = 'bottom';
+
+  constructor(private navCtrl: NavController) {}
+
+  ngAfterContentInit(): void {
+    this.detectSlotChanges();
+  }
+
+  ngAfterContentChecked(): void {
+    this.detectSlotChanges();
+  }
+
+  /**
+   * @internal
+   */
+  onPageSelected(detail: StackEvent): void {
+    const stackId = detail.enteringView.stackId;
+    if (detail.tabSwitch && stackId !== undefined) {
+      this.ionTabsWillChange.emit({ tab: stackId });
+      if (this.tabBar) {
+        this.tabBar.selectedTab = stackId;
+      }
+      this.ionTabsDidChange.emit({ tab: stackId });
+    }
+  }
+
+  /**
+   * 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'])
+  select(tabOrEvent: string | CustomEvent): Promise<boolean> | undefined {
+    const isTabString = typeof tabOrEvent === 'string';
+    const tab = isTabString ? tabOrEvent : (tabOrEvent as CustomEvent).detail.tab;
+    const alreadySelected = this.outlet.getActiveStackId() === tab;
+    const tabRootUrl = `${this.outlet.tabsPrefix}/${tab}`;
+
+    /**
+     * If this is a nested tab, prevent the event
+     * from bubbling otherwise the outer tabs
+     * will respond to this event too, causing
+     * the app to get directed to the wrong place.
+     */
+    if (!isTabString) {
+      (tabOrEvent as CustomEvent).stopPropagation();
+    }
+
+    if (alreadySelected) {
+      const activeStackId = this.outlet.getActiveStackId();
+      const activeView = this.outlet.getLastRouteView(activeStackId);
+
+      // 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?.url || tabRootUrl;
+      const navigationExtras = lastRoute?.savedExtras;
+
+      return this.navCtrl.navigateRoot(url, {
+        ...navigationExtras,
+        animated: true,
+        animationDirection: 'back',
+      });
+    }
+  }
+
+  getSelected(): string | undefined {
+    return this.outlet.getActiveStackId();
+  }
+
+  /**
+   * Detects changes to the slot attribute of the tab bar.
+   *
+   * If the slot attribute has changed, then the tab bar
+   * should be relocated to the new slot position.
+   */
+  private detectSlotChanges(): void {
+    this.tabBars.forEach((tabBar: any) => {
+      // el is a protected attribute from the generated component wrapper
+      const currentSlot = tabBar.el.getAttribute('slot');
+
+      if (currentSlot !== this.tabBarSlot) {
+        this.tabBarSlot = currentSlot;
+        this.relocateTabBar();
+      }
+    });
+  }
+
+  /**
+   * Relocates the tab bar to the new slot position.
+   */
+  private relocateTabBar(): void {
+    /**
+     * `el` is a protected attribute from the generated component wrapper.
+     * To avoid having to manually create the wrapper for tab bar, we
+     * cast the tab bar to any and access the protected attribute.
+     */
+    const tabBar = (this.tabBar as any).el as HTMLElement;
+
+    if (this.tabBarSlot === 'top') {
+      /**
+       * A tab bar with a slot of "top" should be inserted
+       * at the top of the container.
+       */
+      this.tabsInner.nativeElement.before(tabBar);
+    } else {
+      /**
+       * A tab bar with a slot of "bottom" or without a slot
+       * should be inserted at the end of the container.
+       */
+      this.tabsInner.nativeElement.after(tabBar);
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import { ElementRef, Injector, Directive, EnvironmentInjector } from '@angular/core';
+
+import { AngularDelegate } from '../../providers/angular-delegate';
+import { ProxyCmp, proxyOutputs } from '../angular-component-lib/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',
+})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class NavDelegate {
+  protected el: HTMLElement;
+  constructor(
+    ref: ElementRef,
+    environmentInjector: EnvironmentInjector,
+    injector: Injector,
+    angularDelegate: AngularDelegate
+  ) {
+    this.el = ref.nativeElement;
+    ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
+    proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * @description
+ * NavParams are an object that exists on a page and can contain data for that particular view.
+ * Similar to how data was pass to a view in V1 with `$stateParams`, NavParams offer a much more flexible
+ * option with a simple `get` method.
+ *
+ * @usage
+ * ```ts
+ * import { NavParams } from '@ionic/angular';
+ *
+ * export class MyClass{
+ *
+ *  constructor(navParams: NavParams){
+ *    // userParams is an object we have in our nav-parameters
+ *    navParams.get('userParams');
+ *  }
+ *
+ * }
+ * ```
+ */
+export class NavParams {
+  constructor(public data: { [key: string]: any } = {}) {}
+
+  /**
+   * Get the value of a nav-parameter for the current view
+   *
+   * ```ts
+   * import { NavParams } from 'ionic-angular';
+   *
+   * export class MyClass{
+   *  constructor(public navParams: NavParams){
+   *    // userParams is an object we have in our nav-parameters
+   *    this.navParams.get('userParams');
+   *  }
+   * }
+   * ```
+   *
+   * @param param Which param you want to look up
+   */
+  get<T = any>(param: string): T {
+    return this.data[param];
+  }
+}

packages/angular/src/directives/navigation/router-link-delegate.ts

@@ -0,0 +1,106 @@
+import { LocationStrategy } from '@angular/common';
+import { ElementRef, OnChanges, OnInit, Directive, HostListener, Input, Optional } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+import { AnimationBuilder, RouterDirection } from '@ionic/core';
+
+import { NavController } from '../../providers/nav-controller';
+
+/**
+ * Adds support for Ionic routing directions and animations to the base Angular router link directive.
+ *
+ * When the router link is clicked, the directive will assign the direction and
+ * animation so that the routing integration will transition correctly.
+ */
+@Directive({
+  selector: ':not(a):not(area)[routerLink]',
+})
+export class RouterLinkDelegateDirective implements OnInit, OnChanges {
+  @Input()
+  routerDirection: RouterDirection = 'forward';
+
+  @Input()
+  routerAnimation?: AnimationBuilder;
+
+  constructor(
+    private locationStrategy: LocationStrategy,
+    private navCtrl: NavController,
+    private elementRef: ElementRef,
+    private router: Router,
+    @Optional() private routerLink?: RouterLink
+  ) {}
+
+  ngOnInit(): void {
+    this.updateTargetUrlAndHref();
+  }
+
+  ngOnChanges(): void {
+    this.updateTargetUrlAndHref();
+  }
+
+  private updateTargetUrlAndHref() {
+    if (this.routerLink?.urlTree) {
+      const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
+      this.elementRef.nativeElement.href = href;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @HostListener('click', ['$event'])
+  onClick(ev: UIEvent): void {
+    this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
+
+    /**
+     * This prevents the browser from
+     * performing a page reload when pressing
+     * an Ionic component with routerLink.
+     * The page reload interferes with routing
+     * and causes ion-back-button to disappear
+     * since the local history is wiped on reload.
+     */
+    ev.preventDefault();
+  }
+}
+
+@Directive({
+  selector: 'a[routerLink],area[routerLink]',
+})
+export class RouterLinkWithHrefDelegateDirective implements OnInit, OnChanges {
+  @Input()
+  routerDirection: RouterDirection = 'forward';
+
+  @Input()
+  routerAnimation?: AnimationBuilder;
+
+  constructor(
+    private locationStrategy: LocationStrategy,
+    private navCtrl: NavController,
+    private elementRef: ElementRef,
+    private router: Router,
+    @Optional() private routerLink?: RouterLink
+  ) {}
+
+  ngOnInit(): void {
+    this.updateTargetUrlAndHref();
+  }
+
+  ngOnChanges(): void {
+    this.updateTargetUrlAndHref();
+  }
+
+  private updateTargetUrlAndHref() {
+    if (this.routerLink?.urlTree) {
+      const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
+      this.elementRef.nativeElement.href = href;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @HostListener('click')
+  onClick(): void {
+    this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
+  }
+}

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

@@ -0,0 +1,349 @@
+import { Location } from '@angular/common';
+import { ComponentRef, NgZone } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AnimationBuilder, RouterDirection } from '@ionic/core';
+
+import { bindLifecycleEvents } from '../../providers/angular-delegate';
+import { NavController } from '../../providers/nav-controller';
+
+import {
+  RouteView,
+  StackEvent,
+  computeStackId,
+  destroyView,
+  getUrl,
+  insertView,
+  isTabSwitch,
+  toSegments,
+} from './stack-utils';
+
+// TODO(FW-2827): types
+
+export class StackController {
+  private views: RouteView[] = [];
+  private runningTask?: Promise<any>;
+  private skipTransition = false;
+  private tabsPrefix: string[] | undefined;
+  private activeView: RouteView | undefined;
+  private nextId = 0;
+
+  constructor(
+    tabsPrefix: string | undefined,
+    private containerEl: HTMLIonRouterOutletElement,
+    private router: Router,
+    private navCtrl: NavController,
+    private zone: NgZone,
+    private location: Location
+  ) {
+    this.tabsPrefix = tabsPrefix !== undefined ? toSegments(tabsPrefix) : undefined;
+  }
+
+  createView(ref: ComponentRef<any>, activatedRoute: ActivatedRoute): RouteView {
+    const url = getUrl(this.router, activatedRoute);
+    const element = ref?.location?.nativeElement as HTMLElement;
+    const unlistenEvents = bindLifecycleEvents(this.zone, ref.instance, element);
+    return {
+      id: this.nextId++,
+      stackId: computeStackId(this.tabsPrefix, url),
+      unlistenEvents,
+      element,
+      ref,
+      url,
+    };
+  }
+
+  getExistingView(activatedRoute: ActivatedRoute): RouteView | undefined {
+    const activatedUrlKey = getUrl(this.router, activatedRoute);
+    const view = this.views.find((vw) => vw.url === activatedUrlKey);
+    if (view) {
+      view.ref.changeDetectorRef.reattach();
+    }
+    return view;
+  }
+
+  setActive(enteringView: RouteView): Promise<StackEvent> {
+    const consumeResult = this.navCtrl.consumeTransition();
+    let { direction, animation, animationBuilder } = consumeResult;
+    const leavingView = this.activeView;
+    const tabSwitch = isTabSwitch(enteringView, leavingView);
+    if (tabSwitch) {
+      direction = 'back';
+      animation = undefined;
+    }
+
+    const viewsSnapshot = this.views.slice();
+
+    let currentNavigation;
+
+    const router = this.router as any;
+
+    // Angular >= 7.2.0
+    if (router.getCurrentNavigation) {
+      currentNavigation = router.getCurrentNavigation();
+
+      // Angular < 7.2.0
+    } else if (router.navigations?.value) {
+      currentNavigation = router.navigations.value;
+    }
+
+    /**
+     * If the navigation action
+     * sets `replaceUrl: true`
+     * then we need to make sure
+     * we remove the last item
+     * from our views stack
+     */
+    if (currentNavigation?.extras?.replaceUrl) {
+      if (this.views.length > 0) {
+        this.views.splice(-1, 1);
+      }
+    }
+
+    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();
+    }
+
+    /**
+     * If we are going back from a page that
+     * was presented using a custom animation
+     * we should default to using that
+     * unless the developer explicitly
+     * provided another animation.
+     */
+    const customAnimation = enteringView.animationBuilder;
+    if (animationBuilder === undefined && direction === 'back' && !tabSwitch && customAnimation !== undefined) {
+      animationBuilder = customAnimation;
+    }
+
+    /**
+     * Save any custom animation so that navigating
+     * back will use this custom animation by default.
+     */
+    if (leavingView) {
+      leavingView.animationBuilder = animationBuilder;
+    }
+
+    // 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, animationBuilder)
+          .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location, this.zone))
+          .then(() => ({
+            enteringView,
+            direction,
+            animation,
+            tabSwitch,
+          }));
+      });
+    });
+  }
+
+  canGoBack(deep: number, stackId = this.getActiveStackId()): boolean {
+    return this.getStack(stackId).length > deep;
+  }
+
+  pop(deep: number, stackId = this.getActiveStackId()): Promise<boolean> {
+    return this.zone.run(() => {
+      const views = this.getStack(stackId);
+      if (views.length <= deep) {
+        return Promise.resolve(false);
+      }
+      const view = views[views.length - deep - 1];
+      let url = view.url;
+
+      const viewSavedData = view.savedData;
+      if (viewSavedData) {
+        const primaryOutlet = viewSavedData.get('primary');
+        if (primaryOutlet?.route?._routerState?.snapshot.url) {
+          url = primaryOutlet.route._routerState.snapshot.url;
+        }
+      }
+      const { animationBuilder } = this.navCtrl.consumeTransition();
+      return this.navCtrl.navigateBack(url, { ...view.savedExtras, animation: animationBuilder }).then(() => true);
+    });
+  }
+
+  startBackTransition(): Promise<boolean> | Promise<void> {
+    const leavingView = this.activeView;
+    if (leavingView) {
+      const views = this.getStack(leavingView.stackId);
+      const enteringView = views[views.length - 2];
+      const customAnimation = enteringView.animationBuilder;
+
+      return this.wait(() => {
+        return this.transition(
+          enteringView, // entering view
+          leavingView, // leaving view
+          'back',
+          this.canGoBack(2),
+          true,
+          customAnimation
+        );
+      });
+    }
+    return Promise.resolve();
+  }
+
+  endBackTransition(shouldComplete: boolean): void {
+    if (shouldComplete) {
+      this.skipTransition = true;
+      this.pop(1);
+    } else if (this.activeView) {
+      cleanup(this.activeView, this.views, this.views, this.location, this.zone);
+    }
+  }
+
+  getLastUrl(stackId?: string): RouteView | undefined {
+    const views = this.getStack(stackId);
+    return views.length > 0 ? views[views.length - 1] : undefined;
+  }
+
+  /**
+   * @internal
+   */
+  getRootUrl(stackId?: string): RouteView | undefined {
+    const views = this.getStack(stackId);
+    return views.length > 0 ? views[0] : undefined;
+  }
+
+  getActiveStackId(): string | undefined {
+    return this.activeView ? this.activeView.stackId : undefined;
+  }
+
+  hasRunningTask(): boolean {
+    return this.runningTask !== undefined;
+  }
+
+  destroy(): void {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.containerEl = undefined!;
+    this.views.forEach(destroyView);
+    this.activeView = undefined;
+    this.views = [];
+  }
+
+  private getStack(stackId: string | undefined) {
+    return this.views.filter((v) => v.stackId === stackId);
+  }
+
+  private insertView(enteringView: RouteView, direction: RouterDirection) {
+    this.activeView = enteringView;
+    this.views = insertView(this.views, enteringView, direction);
+    return this.views.slice();
+  }
+
+  private transition(
+    enteringView: RouteView | undefined,
+    leavingView: RouteView | undefined,
+    direction: 'forward' | 'back' | undefined,
+    showGoBack: boolean,
+    progressAnimation: boolean,
+    animationBuilder?: AnimationBuilder
+  ) {
+    if (this.skipTransition) {
+      this.skipTransition = false;
+      return Promise.resolve(false);
+    }
+    if (leavingView === enteringView) {
+      return Promise.resolve(false);
+    }
+    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');
+      if (enteringEl.parentElement !== containerEl) {
+        containerEl.appendChild(enteringEl);
+      }
+
+      if ((containerEl as any).commit) {
+        return containerEl.commit(enteringEl, leavingEl, {
+          duration: direction === undefined ? 0 : undefined,
+          direction,
+          showGoBack,
+          progressAnimation,
+          animationBuilder,
+        });
+      }
+    }
+    return Promise.resolve(false);
+  }
+
+  private async wait<T>(task: () => Promise<T>): Promise<T> {
+    if (this.runningTask !== undefined) {
+      await this.runningTask;
+      this.runningTask = undefined;
+    }
+    const promise = (this.runningTask = task());
+    promise.finally(() => (this.runningTask = undefined));
+    return promise;
+  }
+}
+
+const cleanupAsync = (
+  activeRoute: RouteView,
+  views: RouteView[],
+  viewsSnapshot: RouteView[],
+  location: Location,
+  zone: NgZone
+) => {
+  if (typeof (requestAnimationFrame as any) === 'function') {
+    return new Promise<void>((resolve) => {
+      requestAnimationFrame(() => {
+        cleanup(activeRoute, views, viewsSnapshot, location, zone);
+        resolve();
+      });
+    });
+  }
+  return Promise.resolve();
+};
+
+const cleanup = (
+  activeRoute: RouteView,
+  views: RouteView[],
+  viewsSnapshot: RouteView[],
+  location: Location,
+  zone: NgZone
+) => {
+  /**
+   * Re-enter the Angular zone when destroying page components. This will allow
+   * lifecycle events (`ngOnDestroy`) to be run inside the Angular zone.
+   */
+  zone.run(() => 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) {
+      const element = view.element;
+      element.setAttribute('aria-hidden', 'true');
+      element.classList.add('ion-page-hidden');
+      view.ref.changeDetectorRef.detach();
+    }
+  });
+};

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

@@ -0,0 +1,100 @@
+import { ComponentRef } from '@angular/core';
+import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';
+
+export const insertView = (views: RouteView[], view: RouteView, direction: RouterDirection): RouteView[] => {
+  if (direction === 'root') {
+    return setRoot(views, view);
+  } else if (direction === 'forward') {
+    return setForward(views, view);
+  } else {
+    return setBack(views, view);
+  }
+};
+
+const setRoot = (views: RouteView[], view: RouteView) => {
+  views = views.filter((v) => v.stackId !== view.stackId);
+  views.push(view);
+  return views;
+};
+
+const setForward = (views: RouteView[], view: RouteView) => {
+  const index = views.indexOf(view);
+  if (index >= 0) {
+    views = views.filter((v) => v.stackId !== view.stackId || v.id <= view.id);
+  } else {
+    views.push(view);
+  }
+  return views;
+};
+
+const setBack = (views: RouteView[], view: RouteView) => {
+  const index = views.indexOf(view);
+  if (index >= 0) {
+    return views.filter((v) => v.stackId !== view.stackId || v.id <= view.id);
+  } else {
+    return setRoot(views, view);
+  }
+};
+
+export const getUrl = (router: Router, activatedRoute: ActivatedRoute): string => {
+  const urlTree = router.createUrlTree(['.'], { relativeTo: activatedRoute });
+  return router.serializeUrl(urlTree);
+};
+
+export const isTabSwitch = (enteringView: RouteView, leavingView: RouteView | undefined): boolean => {
+  if (!leavingView) {
+    return true;
+  }
+  return enteringView.stackId !== leavingView.stackId;
+};
+
+export const computeStackId = (prefixUrl: string[] | undefined, url: string): string | undefined => {
+  if (!prefixUrl) {
+    return undefined;
+  }
+  const segments = toSegments(url);
+  for (let i = 0; i < segments.length; i++) {
+    if (i >= prefixUrl.length) {
+      return segments[i];
+    }
+    if (segments[i] !== prefixUrl[i]) {
+      return undefined;
+    }
+  }
+  return undefined;
+};
+
+export const toSegments = (path: string): string[] => {
+  return path
+    .split('/')
+    .map((s) => s.trim())
+    .filter((s) => s !== '');
+};
+
+export const destroyView = (view: RouteView | undefined): void => {
+  if (view) {
+    view.ref.destroy();
+    view.unlistenEvents();
+  }
+};
+
+export interface StackEvent {
+  enteringView: RouteView;
+  direction: RouterDirection;
+  animation: NavDirection | undefined;
+  tabSwitch: boolean;
+}
+
+// TODO(FW-2827): types
+export interface RouteView {
+  id: number;
+  url: string;
+  stackId: string | undefined;
+  element: HTMLElement;
+  ref: ComponentRef<any>;
+  savedData?: any;
+  savedExtras?: NavigationExtras;
+  unlistenEvents: () => void;
+  animationBuilder?: AnimationBuilder;
+}

packages/angular/src/directives/overlays/modal.ts

@@ -0,0 +1,139 @@
+/* eslint-disable */
+/* tslint:disable */
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  NgZone,
+  TemplateRef,
+} from '@angular/core';
+import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
+import { Components, ModalBreakpointChangeEventDetail } from '@ionic/core';
+
+export declare interface IonModal extends Components.IonModal {
+  /**
+   * Emitted after the modal has presented.
+   **/
+  ionModalDidPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has presented.
+   */
+  ionModalWillPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has dismissed.
+   */
+  ionModalWillDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal has dismissed.
+   */
+  ionModalDidDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal breakpoint has changed.
+   */
+  ionBreakpointDidChange: EventEmitter<CustomEvent<ModalBreakpointChangeEventDetail>>;
+  /**
+   * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
+   */
+  didPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
+   */
+  willPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
+   */
+  willDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
+   */
+  didDismiss: EventEmitter<CustomEvent>;
+}
+@ProxyCmp({
+  inputs: [
+    'animated',
+    'keepContentsMounted',
+    'backdropBreakpoint',
+    'backdropDismiss',
+    'breakpoints',
+    'canDismiss',
+    'cssClass',
+    'enterAnimation',
+    'event',
+    'handle',
+    'handleBehavior',
+    'initialBreakpoint',
+    'isOpen',
+    'keyboardClose',
+    'leaveAnimation',
+    'mode',
+    'presentingElement',
+    'showBackdrop',
+    'translucent',
+    'trigger',
+  ],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'setCurrentBreakpoint', 'getCurrentBreakpoint'],
+})
+@Component({
+  selector: 'ion-modal',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="ion-delegate-host ion-page" *ngIf="isCmpOpen || keepContentsMounted">
+    <ng-container [ngTemplateOutlet]="template"></ng-container>
+  </div>`,
+  inputs: [
+    'animated',
+    'keepContentsMounted',
+    'backdropBreakpoint',
+    'backdropDismiss',
+    'breakpoints',
+    'canDismiss',
+    'cssClass',
+    'enterAnimation',
+    'event',
+    'handle',
+    'handleBehavior',
+    'initialBreakpoint',
+    'isOpen',
+    'keyboardClose',
+    'leaveAnimation',
+    'mode',
+    'presentingElement',
+    'showBackdrop',
+    'translucent',
+    'trigger',
+  ],
+})
+export class IonModal {
+  // TODO(FW-2827): type
+  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+
+  isCmpOpen: boolean = false;
+
+  protected el: HTMLElement;
+
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    this.el = r.nativeElement;
+
+    this.el.addEventListener('ionMount', () => {
+      this.isCmpOpen = true;
+      c.detectChanges();
+    });
+    this.el.addEventListener('didDismiss', () => {
+      this.isCmpOpen = false;
+      c.detectChanges();
+    });
+    proxyOutputs(this, this.el, [
+      'ionModalDidPresent',
+      'ionModalWillPresent',
+      'ionModalWillDismiss',
+      'ionModalDidDismiss',
+      'ionBreakpointDidChange',
+      'didPresent',
+      'willPresent',
+      'willDismiss',
+      'didDismiss',
+    ]);
+  }
+}

packages/angular/src/directives/overlays/popover.ts

@@ -0,0 +1,131 @@
+/* eslint-disable */
+/* tslint:disable */
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  NgZone,
+  TemplateRef,
+} from '@angular/core';
+import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
+import { Components } from '@ionic/core';
+export declare interface IonPopover extends Components.IonPopover {
+  /**
+   * Emitted after the popover has presented.
+   */
+  ionPopoverDidPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the popover has presented.
+   */
+  ionPopoverWillPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has dismissed.
+   */
+  ionPopoverWillDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has dismissed.
+   */
+  ionPopoverDidDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
+   */
+  didPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
+   */
+  willPresent: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
+   */
+  willDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
+   */
+  didDismiss: EventEmitter<CustomEvent>;
+}
+@ProxyCmp({
+  inputs: [
+    'alignment',
+    'animated',
+    'arrow',
+    'keepContentsMounted',
+    'backdropDismiss',
+    'cssClass',
+    'dismissOnSelect',
+    'enterAnimation',
+    'event',
+    'isOpen',
+    'keyboardClose',
+    'leaveAnimation',
+    'mode',
+    'showBackdrop',
+    'translucent',
+    'trigger',
+    'triggerAction',
+    'reference',
+    'size',
+    'side',
+  ],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+})
+@Component({
+  selector: 'ion-popover',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || keepContentsMounted"></ng-container>`,
+  inputs: [
+    'alignment',
+    'animated',
+    'arrow',
+    'keepContentsMounted',
+    'backdropDismiss',
+    'cssClass',
+    'dismissOnSelect',
+    'enterAnimation',
+    'event',
+    'isOpen',
+    'keyboardClose',
+    'leaveAnimation',
+    'mode',
+    'showBackdrop',
+    'translucent',
+    'trigger',
+    'triggerAction',
+    'reference',
+    'size',
+    'side',
+  ],
+})
+export class IonPopover {
+  // TODO(FW-2827): type
+  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
+
+  isCmpOpen: boolean = false;
+
+  protected el: HTMLElement;
+
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    this.el = r.nativeElement;
+
+    this.el.addEventListener('ionMount', () => {
+      this.isCmpOpen = true;
+      c.detectChanges();
+    });
+    this.el.addEventListener('didDismiss', () => {
+      this.isCmpOpen = false;
+      c.detectChanges();
+    });
+    proxyOutputs(this, this.el, [
+      'ionPopoverDidPresent',
+      'ionPopoverWillPresent',
+      'ionPopoverWillDismiss',
+      'ionPopoverDidDismiss',
+      'didPresent',
+      'willPresent',
+      'willDismiss',
+      'didDismiss',
+    ]);
+  }
+}

packages/angular/src/directives/proxies-list.ts

@@ -0,0 +1,84 @@
+
+import * as d from './proxies';
+
+export const DIRECTIVES = [
+  d.IonAccordion,
+  d.IonAccordionGroup,
+  d.IonActionSheet,
+  d.IonAlert,
+  d.IonApp,
+  d.IonAvatar,
+  d.IonBackButton,
+  d.IonBackdrop,
+  d.IonBadge,
+  d.IonBreadcrumb,
+  d.IonBreadcrumbs,
+  d.IonButton,
+  d.IonButtons,
+  d.IonCard,
+  d.IonCardContent,
+  d.IonCardHeader,
+  d.IonCardSubtitle,
+  d.IonCardTitle,
+  d.IonCheckbox,
+  d.IonChip,
+  d.IonCol,
+  d.IonContent,
+  d.IonDatetime,
+  d.IonDatetimeButton,
+  d.IonFab,
+  d.IonFabButton,
+  d.IonFabList,
+  d.IonFooter,
+  d.IonGrid,
+  d.IonHeader,
+  d.IonIcon,
+  d.IonImg,
+  d.IonInfiniteScroll,
+  d.IonInfiniteScrollContent,
+  d.IonInput,
+  d.IonItem,
+  d.IonItemDivider,
+  d.IonItemGroup,
+  d.IonItemOption,
+  d.IonItemOptions,
+  d.IonItemSliding,
+  d.IonLabel,
+  d.IonList,
+  d.IonListHeader,
+  d.IonLoading,
+  d.IonMenu,
+  d.IonMenuButton,
+  d.IonMenuToggle,
+  d.IonNav,
+  d.IonNavLink,
+  d.IonNote,
+  d.IonPicker,
+  d.IonProgressBar,
+  d.IonRadio,
+  d.IonRadioGroup,
+  d.IonRange,
+  d.IonRefresher,
+  d.IonRefresherContent,
+  d.IonReorder,
+  d.IonReorderGroup,
+  d.IonRippleEffect,
+  d.IonRow,
+  d.IonSearchbar,
+  d.IonSegment,
+  d.IonSegmentButton,
+  d.IonSelect,
+  d.IonSelectOption,
+  d.IonSkeletonText,
+  d.IonSpinner,
+  d.IonSplitPane,
+  d.IonTabBar,
+  d.IonTabButton,
+  d.IonText,
+  d.IonTextarea,
+  d.IonThumbnail,
+  d.IonTitle,
+  d.IonToast,
+  d.IonToggle,
+  d.IonToolbar
+];

packages/angular/src/index.ts

@@ -0,0 +1,131 @@
+// DIRECTIVES
+export { BooleanValueAccessorDirective as BooleanValueAccessor } from './directives/control-value-accessors/boolean-value-accessor';
+export { NumericValueAccessorDirective as NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accessor';
+export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
+export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
+export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
+export { IonTabs } from './directives/navigation/ion-tabs';
+export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
+export { NavDelegate } from './directives/navigation/nav-delegate';
+export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
+export {
+  RouterLinkDelegateDirective as RouterLinkDelegate,
+  RouterLinkWithHrefDelegateDirective as RouterLinkWithHrefDelegate,
+} from './directives/navigation/router-link-delegate';
+
+export { NavParams } from './directives/navigation/nav-params';
+export { IonModal } from './directives/overlays/modal';
+export { IonPopover } from './directives/overlays/popover';
+export * from './directives/proxies';
+
+// PROVIDERS
+export { AngularDelegate } from './providers/angular-delegate';
+export { ActionSheetController } from './providers/action-sheet-controller';
+export { AlertController } from './providers/alert-controller';
+export { LoadingController } from './providers/loading-controller';
+export { MenuController } from './providers/menu-controller';
+export { PickerController } from './providers/picker-controller';
+export { ModalController } from './providers/modal-controller';
+export { Platform } from './providers/platform';
+export { PopoverController } from './providers/popover-controller';
+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';
+
+export {
+  // UTILS
+  createAnimation,
+  createGesture,
+  iosTransitionAnimation,
+  mdTransitionAnimation,
+  IonicSlides,
+  getPlatforms,
+  isPlatform,
+  getTimeGivenProgression,
+  // TYPES
+  Animation,
+  AnimationBuilder,
+  AnimationCallbackOptions,
+  AnimationDirection,
+  AnimationFill,
+  AnimationKeyFrames,
+  AnimationLifecycle,
+  Gesture,
+  GestureConfig,
+  GestureDetail,
+  NavComponentWithProps,
+  SpinnerTypes,
+  AccordionGroupCustomEvent,
+  AccordionGroupChangeEventDetail,
+  BreadcrumbCustomEvent,
+  BreadcrumbCollapsedClickEventDetail,
+  ActionSheetOptions,
+  ActionSheetButton,
+  AlertOptions,
+  AlertInput,
+  AlertButton,
+  BackButtonEvent,
+  CheckboxCustomEvent,
+  CheckboxChangeEventDetail,
+  DatetimeCustomEvent,
+  DatetimeChangeEventDetail,
+  InfiniteScrollCustomEvent,
+  InputCustomEvent,
+  InputChangeEventDetail,
+  ItemReorderEventDetail,
+  ItemReorderCustomEvent,
+  ItemSlidingCustomEvent,
+  IonicSafeString,
+  LoadingOptions,
+  MenuCustomEvent,
+  ModalOptions,
+  NavCustomEvent,
+  PickerOptions,
+  PickerButton,
+  PickerColumn,
+  PickerColumnOption,
+  PlatformConfig,
+  PopoverOptions,
+  RadioGroupCustomEvent,
+  RadioGroupChangeEventDetail,
+  RangeCustomEvent,
+  RangeChangeEventDetail,
+  RangeKnobMoveStartEventDetail,
+  RangeKnobMoveEndEventDetail,
+  RefresherCustomEvent,
+  RefresherEventDetail,
+  RouterEventDetail,
+  RouterCustomEvent,
+  ScrollBaseCustomEvent,
+  ScrollBaseDetail,
+  ScrollDetail,
+  ScrollCustomEvent,
+  SearchbarCustomEvent,
+  SearchbarChangeEventDetail,
+  SearchbarInputEventDetail,
+  SegmentChangeEventDetail,
+  SegmentCustomEvent,
+  SegmentValue,
+  SelectChangeEventDetail,
+  SelectCustomEvent,
+  TabsCustomEvent,
+  TextareaChangeEventDetail,
+  TextareaCustomEvent,
+  ToastOptions,
+  ToastButton,
+  ToastLayout,
+  ToggleChangeEventDetail,
+  ToggleCustomEvent,
+} from '@ionic/core';

packages/angular/src/ionic-core.ts

@@ -0,0 +1,21 @@
+// Re-exports from ionic/core
+
+// UTILS
+export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core';
+
+// CORE TYPES
+export {
+  Animation,
+  AnimationBuilder,
+  AnimationCallbackOptions,
+  AnimationDirection,
+  AnimationFill,
+  AnimationKeyFrames,
+  AnimationLifecycle,
+  Gesture,
+  GestureConfig,
+  GestureDetail,
+  mdTransitionAnimation,
+  iosTransitionAnimation,
+  NavComponentWithProps,
+} from '@ionic/core';

packages/angular/src/ionic-module.ts

@@ -0,0 +1,77 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { ModuleWithProviders, APP_INITIALIZER, NgModule, NgZone } from '@angular/core';
+import { IonicConfig } from '@ionic/core';
+
+import { appInitialize } from './app-initialize';
+import {
+  BooleanValueAccessorDirective,
+  NumericValueAccessorDirective,
+  RadioValueAccessorDirective,
+  SelectValueAccessorDirective,
+  TextValueAccessorDirective,
+} from './directives/control-value-accessors';
+import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back-button';
+import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
+import { IonTabs } from './directives/navigation/ion-tabs';
+import { NavDelegate } from './directives/navigation/nav-delegate';
+import {
+  RouterLinkDelegateDirective,
+  RouterLinkWithHrefDelegateDirective,
+} from './directives/navigation/router-link-delegate';
+import { IonModal } from './directives/overlays/modal';
+import { IonPopover } from './directives/overlays/popover';
+import { DIRECTIVES } from './directives/proxies-list';
+import { AngularDelegate } from './providers/angular-delegate';
+import { ConfigToken } from './providers/config';
+import { ModalController } from './providers/modal-controller';
+import { PopoverController } from './providers/popover-controller';
+
+const DECLARATIONS = [
+  // generated proxies
+  ...DIRECTIVES,
+
+  // manual proxies
+  IonModal,
+  IonPopover,
+
+  // ngModel accessors
+  BooleanValueAccessorDirective,
+  NumericValueAccessorDirective,
+  RadioValueAccessorDirective,
+  SelectValueAccessorDirective,
+  TextValueAccessorDirective,
+
+  // navigation
+  IonTabs,
+  IonRouterOutlet,
+  IonBackButtonDelegateDirective,
+  NavDelegate,
+  RouterLinkDelegateDirective,
+  RouterLinkWithHrefDelegateDirective,
+];
+
+@NgModule({
+  declarations: DECLARATIONS,
+  exports: DECLARATIONS,
+  providers: [AngularDelegate, ModalController, PopoverController],
+  imports: [CommonModule],
+})
+export class IonicModule {
+  static forRoot(config?: IonicConfig): ModuleWithProviders<IonicModule> {
+    return {
+      ngModule: IonicModule,
+      providers: [
+        {
+          provide: ConfigToken,
+          useValue: config,
+        },
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appInitialize,
+          multi: true,
+          deps: [ConfigToken, DOCUMENT, NgZone],
+        },
+      ],
+    };
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { ActionSheetOptions, actionSheetController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
+  constructor() {
+    super(actionSheetController);
+  }
+}

packages/angular/src/providers/alert-controller.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { AlertOptions, alertController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
+  constructor() {
+    super(alertController);
+  }
+}

packages/angular/src/providers/angular-delegate.ts

@@ -0,0 +1,221 @@
+import {
+  ApplicationRef,
+  NgZone,
+  Injectable,
+  Injector,
+  EnvironmentInjector,
+  inject,
+  createComponent,
+  InjectionToken,
+  ComponentRef,
+} from '@angular/core';
+import {
+  FrameworkDelegate,
+  LIFECYCLE_DID_ENTER,
+  LIFECYCLE_DID_LEAVE,
+  LIFECYCLE_WILL_ENTER,
+  LIFECYCLE_WILL_LEAVE,
+  LIFECYCLE_WILL_UNLOAD,
+} from '@ionic/core';
+
+import { NavParams } from '../directives/navigation/nav-params';
+
+// TODO(FW-2827): types
+
+@Injectable()
+export class AngularDelegate {
+  private zone = inject(NgZone);
+  private applicationRef = inject(ApplicationRef);
+
+  create(
+    environmentInjector: EnvironmentInjector,
+    injector: Injector,
+    elementReferenceKey?: string
+  ): AngularFrameworkDelegate {
+    return new AngularFrameworkDelegate(
+      environmentInjector,
+      injector,
+      this.applicationRef,
+      this.zone,
+      elementReferenceKey
+    );
+  }
+}
+
+export class AngularFrameworkDelegate implements FrameworkDelegate {
+  private elRefMap = new WeakMap<HTMLElement, ComponentRef<any>>();
+  private elEventsMap = new WeakMap<HTMLElement, () => void>();
+
+  constructor(
+    private environmentInjector: EnvironmentInjector,
+    private injector: Injector,
+    private applicationRef: ApplicationRef,
+    private zone: NgZone,
+    private elementReferenceKey?: string
+  ) {}
+
+  attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
+    return this.zone.run(() => {
+      return new Promise((resolve) => {
+        const componentProps = {
+          ...params,
+        };
+
+        /**
+         * Ionic Angular passes a reference to a modal
+         * or popover that can be accessed using a
+         * variable in the overlay component. If
+         * elementReferenceKey is defined, then we should
+         * pass a reference to the component using
+         * elementReferenceKey as the key.
+         */
+        if (this.elementReferenceKey !== undefined) {
+          componentProps[this.elementReferenceKey] = container;
+        }
+
+        const el = attachView(
+          this.zone,
+          this.environmentInjector,
+          this.injector,
+          this.applicationRef,
+          this.elRefMap,
+          this.elEventsMap,
+          container,
+          component,
+          componentProps,
+          cssClasses,
+          this.elementReferenceKey
+        );
+        resolve(el);
+      });
+    });
+  }
+
+  removeViewFromDom(_container: any, component: any): Promise<void> {
+    return this.zone.run(() => {
+      return new Promise((resolve) => {
+        const componentRef = this.elRefMap.get(component);
+        if (componentRef) {
+          componentRef.destroy();
+          this.elRefMap.delete(component);
+          const unbindEvents = this.elEventsMap.get(component);
+          if (unbindEvents) {
+            unbindEvents();
+            this.elEventsMap.delete(component);
+          }
+        }
+        resolve();
+      });
+    });
+  }
+}
+
+export const attachView = (
+  zone: NgZone,
+  environmentInjector: EnvironmentInjector,
+  injector: Injector,
+  applicationRef: ApplicationRef,
+  elRefMap: WeakMap<HTMLElement, ComponentRef<any>>,
+  elEventsMap: WeakMap<HTMLElement, () => void>,
+  container: any,
+  component: any,
+  params: any,
+  cssClasses: string[] | undefined,
+  elementReferenceKey: string | undefined
+): any => {
+  /**
+   * Wraps the injector with a custom injector that
+   * provides NavParams to the component.
+   *
+   * NavParams is a legacy feature from Ionic v3 that allows
+   * Angular developers to provide data to a component
+   * and access it by providing NavParams as a dependency
+   * in the constructor.
+   *
+   * The modern approach is to access the data directly
+   * from the component's class instance.
+   */
+  const childInjector = Injector.create({
+    providers: getProviders(params),
+    parent: injector,
+  });
+
+  const componentRef = createComponent<any>(component, {
+    environmentInjector,
+    elementInjector: childInjector,
+  });
+
+  const instance = componentRef.instance;
+  const hostElement = componentRef.location.nativeElement;
+
+  if (params) {
+    /**
+     * For modals and popovers, a reference to the component is
+     * added to `params` during the call to attachViewToDom. If
+     * a reference using this name is already set, this means
+     * the app is trying to use the name as a component prop,
+     * which will cause collisions.
+     */
+    if (elementReferenceKey && instance[elementReferenceKey] !== undefined) {
+      console.error(
+        `[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${
+          component.name
+        }.`
+      );
+    }
+
+    Object.assign(instance, params);
+  }
+  if (cssClasses) {
+    for (const cssClass of cssClasses) {
+      hostElement.classList.add(cssClass);
+    }
+  }
+  const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
+  container.appendChild(hostElement);
+
+  applicationRef.attachView(componentRef.hostView);
+
+  elRefMap.set(hostElement, componentRef);
+  elEventsMap.set(hostElement, unbindEvents);
+  return hostElement;
+};
+
+const LIFECYCLES = [
+  LIFECYCLE_WILL_ENTER,
+  LIFECYCLE_DID_ENTER,
+  LIFECYCLE_WILL_LEAVE,
+  LIFECYCLE_DID_LEAVE,
+  LIFECYCLE_WILL_UNLOAD,
+];
+
+export const bindLifecycleEvents = (zone: NgZone, instance: any, element: HTMLElement): (() => void) => {
+  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());
+  });
+};
+
+const NavParamsToken = new InjectionToken<any>('NavParamsToken');
+
+const getProviders = (params: { [key: string]: any }) => {
+  return [
+    {
+      provide: NavParamsToken,
+      useValue: params,
+    },
+    {
+      provide: NavParams,
+      useFactory: provideNavParamsInjectable,
+      deps: [NavParamsToken],
+    },
+  ];
+};
+
+const provideNavParamsInjectable = (params: { [key: string]: any }) => {
+  return new NavParams(params);
+};

packages/angular/src/providers/animation-controller.ts

@@ -0,0 +1,32 @@
+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);
+  }
+}

packages/angular/src/providers/config.ts

@@ -0,0 +1,45 @@
+import { Injectable, InjectionToken } from '@angular/core';
+import { Config as CoreConfig, IonicConfig } from '@ionic/core';
+
+import { IonicWindow } from '../types/interfaces';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Config {
+  get(key: keyof IonicConfig, fallback?: any): any {
+    const c = getConfig();
+    if (c) {
+      return c.get(key, fallback);
+    }
+    return null;
+  }
+
+  getBoolean(key: keyof IonicConfig, fallback?: boolean): boolean {
+    const c = getConfig();
+    if (c) {
+      return c.getBoolean(key, fallback);
+    }
+    return false;
+  }
+
+  getNumber(key: keyof IonicConfig, fallback?: number): number {
+    const c = getConfig();
+    if (c) {
+      return c.getNumber(key, fallback);
+    }
+    return 0;
+  }
+}
+
+export const ConfigToken = new InjectionToken<any>('USERCONFIG');
+
+const getConfig = (): CoreConfig | null => {
+  if (typeof (window as any) !== 'undefined') {
+    const Ionic = (window as any as IonicWindow).Ionic;
+    if (Ionic?.config) {
+      return Ionic.config;
+    }
+  }
+  return null;
+};

packages/angular/src/providers/dom-controller.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DomController {
+  /**
+   * Schedules a task to run during the READ phase of the next frame.
+   * This task should only read the DOM, but never modify it.
+   */
+  read(cb: RafCallback): void {
+    getQueue().read(cb);
+  }
+
+  /**
+   * Schedules a task to run during the WRITE phase of the next frame.
+   * This task should write the DOM, but never READ it.
+   */
+  write(cb: RafCallback): void {
+    getQueue().write(cb);
+  }
+}
+
+const getQueue = () => {
+  const win = typeof (window as any) !== 'undefined' ? window : (null as any);
+
+  if (win != null) {
+    const Ionic = win.Ionic;
+    if (Ionic?.queue) {
+      return Ionic.queue;
+    }
+
+    return {
+      read: (cb: any) => win.requestAnimationFrame(cb),
+      write: (cb: any) => win.requestAnimationFrame(cb),
+    };
+  }
+
+  return {
+    read: (cb: any) => cb(),
+    write: (cb: any) => cb(),
+  };
+};
+
+export type RafCallback = (timeStamp?: number) => void;

packages/angular/src/providers/gesture-controller.ts

@@ -0,0 +1,24 @@
+import { NgZone, Injectable } 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: any[]) => this.zone.run(() => fn(...props));
+        }
+      });
+    }
+
+    return createGesture(opts);
+  }
+}

packages/angular/src/providers/loading-controller.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { LoadingOptions, loadingController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
+  constructor() {
+    super(loadingController);
+  }
+}

packages/angular/src/providers/menu-controller.ts

@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+import { menuController } from '@ionic/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MenuController {
+  /**
+   * 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): Promise<boolean> {
+    return menuController.open(menuId);
+  }
+
+  /**
+   * Programmatically close the Menu. If no `menuId` is given as the first
+   * argument then it'll close any menu which is open. If a `menuId`
+   * is given then it'll close that exact menu.
+   * @param [menuId]  Optionally get the menu by its id, or side.
+   * @return returns a promise when the menu is fully closed
+   */
+  close(menuId?: string): Promise<boolean> {
+    return menuController.close(menuId);
+  }
+
+  /**
+   * Toggle the menu. If it's closed, it will open, and if opened, it
+   * will close.
+   * @param [menuId]  Optionally get the menu by its id, or side.
+   * @return returns a promise when the menu has been toggled
+   */
+  toggle(menuId?: string): Promise<boolean> {
+    return menuController.toggle(menuId);
+  }
+
+  /**
+   * Used to enable or disable a menu. For example, there could be multiple
+   * left menus, but only one of them should be able to be opened at the same
+   * time. If there are multiple menus on the same side, then enabling one menu
+   * will also automatically disable all the others that are on the same side.
+   * @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): Promise<HTMLIonMenuElement | undefined> {
+    return menuController.enable(shouldEnable, menuId);
+  }
+
+  /**
+   * Used to enable or disable the ability to swipe open the menu.
+   * @param shouldEnable  True if it should be swipe-able, false if not.
+   * @param [menuId]  Optionally get the menu by its id, or side.
+   * @return Returns the instance of the menu, which is useful for chaining.
+   */
+  swipeGesture(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement | undefined> {
+    return menuController.swipeGesture(shouldEnable, menuId);
+  }
+
+  /**
+   * @param [menuId] Optionally get the menu by its id, or side.
+   * @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): Promise<boolean> {
+    return menuController.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): Promise<boolean> {
+    return menuController.isEnabled(menuId);
+  }
+
+  /**
+   * Used to get a menu instance. If a `menuId` is not provided then it'll
+   * return the first menu found. If a `menuId` is `left` or `right`, then
+   * it'll return the enabled menu on that side. Otherwise, if a `menuId` is
+   * provided, then it'll try to find the menu using the menu's `id`
+   * property. If a menu is not found then it'll return `null`.
+   * @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): Promise<HTMLIonMenuElement | undefined> {
+    return menuController.get(menuId);
+  }
+
+  /**
+   * @return Returns the instance of the menu already opened, otherwise `null`.
+   */
+  getOpen(): Promise<HTMLIonMenuElement | undefined> {
+    return menuController.getOpen();
+  }
+
+  /**
+   * @return Returns an array of all menu instances.
+   */
+  getMenus(): Promise<HTMLIonMenuElement[]> {
+    return menuController.getMenus();
+  }
+}

packages/angular/src/providers/modal-controller.ts

@@ -0,0 +1,24 @@
+import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
+import { ModalOptions, modalController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+import { AngularDelegate } from './angular-delegate';
+
+@Injectable()
+export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
+  private angularDelegate = inject(AngularDelegate);
+  private injector = inject(Injector);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  constructor() {
+    super(modalController);
+  }
+
+  create(opts: ModalOptions): Promise<HTMLIonModalElement> {
+    return super.create({
+      ...opts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
+    });
+  }
+}

packages/angular/src/providers/nav-controller.ts

@@ -0,0 +1,258 @@
+import { Location } from '@angular/common';
+import { Injectable, Optional } from '@angular/core';
+import { NavigationExtras, Router, UrlSerializer, UrlTree, NavigationStart } from '@angular/router';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';
+
+import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
+
+import { Platform } from './platform';
+
+export interface AnimationOptions {
+  animated?: boolean;
+  animation?: AnimationBuilder;
+  animationDirection?: 'forward' | 'back';
+}
+
+export interface NavigationOptions extends NavigationExtras, AnimationOptions {}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NavController {
+  private topOutlet?: IonRouterOutlet;
+  private direction: 'forward' | 'back' | 'root' | 'auto' = DEFAULT_DIRECTION;
+  private animated?: NavDirection = DEFAULT_ANIMATED;
+  private animationBuilder?: AnimationBuilder;
+  private guessDirection: RouterDirection = 'forward';
+  private guessAnimation?: NavDirection;
+  private lastNavId = -1;
+
+  constructor(
+    platform: Platform,
+    private location: Location,
+    private serializer: UrlSerializer,
+    @Optional() private router?: Router
+  ) {
+    // Subscribe to router events to detect direction
+    if (router) {
+      router.events.subscribe((ev) => {
+        if (ev instanceof NavigationStart) {
+          const id = ev.restoredState ? ev.restoredState.navigationId : ev.id;
+          this.guessDirection = id < this.lastNavId ? 'back' : 'forward';
+          this.guessAnimation = !ev.restoredState ? this.guessDirection : undefined;
+          this.lastNavId = this.guessDirection === 'forward' ? ev.id : id;
+        }
+      });
+    }
+
+    // Subscribe to backButton events
+    platform.backButton.subscribeWithPriority(0, (processNextHandler) => {
+      this.pop();
+      processNextHandler();
+    });
+  }
+
+  /**
+   * 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.
+   *
+   * Going **forward** means that a new page is going to be pushed to the stack of the outlet (ion-router-outlet),
+   * and that it will show a "forward" animation by default.
+   *
+   * Navigating forward can also be triggered in a declarative manner by using the `[routerDirection]` directive:
+   *
+   * ```html
+   * <a routerLink="/path/to/page" routerDirection="forward">Link</a>
+   * ```
+   */
+  navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
+    this.setDirection('forward', options.animated, options.animationDirection, options.animation);
+    return this.navigate(url, options);
+  }
+
+  /**
+   * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
+   * it's equivalent to calling:
+   *
+   * ```ts
+   * this.navController.setDirection('back');
+   * this.router.navigateByUrl(path);
+   * ```
+   *
+   * Going **back** means that all the pages in the stack until the navigated page is found will be popped,
+   * 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:
+   *
+   * ```html
+   * <a routerLink="/path/to/page" routerDirection="back">Link</a>
+   * ```
+   */
+  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
+    this.setDirection('back', options.animated, options.animationDirection, options.animation);
+    return this.navigate(url, options);
+  }
+
+  /**
+   * This method uses Angular's [Router](https://angular.io/api/router/Router) under the hood,
+   * it's equivalent to calling:
+   *
+   * ```ts
+   * this.navController.setDirection('root');
+   * this.router.navigateByUrl(path);
+   * ```
+   *
+   * 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:
+   *
+   * ```html
+   * <a routerLink="/path/to/page" routerDirection="root">Link</a>
+   * ```
+   */
+  navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
+    this.setDirection('root', options.animated, options.animationDirection, options.animation);
+    return this.navigate(url, options);
+  }
+
+  /**
+   * 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.
+   */
+  back(options: AnimationOptions = { animated: true, animationDirection: 'back' }): void {
+    this.setDirection('back', options.animated, options.animationDirection, options.animation);
+    return this.location.back();
+  }
+
+  /**
+   * This methods goes back in the context of Ionic's stack navigation.
+   *
+   * It recursively finds the top active `ion-router-outlet` and calls `pop()`.
+   * This is the recommended way to go back when you are using `ion-router-outlet`.
+   *
+   * Resolves to `true` if it was able to pop.
+   */
+  async pop(): Promise<boolean> {
+    let outlet = this.topOutlet;
+
+    while (outlet) {
+      if (await outlet.pop()) {
+        return true;
+      } else {
+        outlet = outlet.parentOutlet;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * 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`.
+   *
+   * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateRoot()` instead of `setDirection()`.
+   */
+  setDirection(
+    direction: RouterDirection,
+    animated?: boolean,
+    animationDirection?: 'forward' | 'back',
+    animationBuilder?: AnimationBuilder
+  ): void {
+    this.direction = direction;
+    this.animated = getAnimation(direction, animated, animationDirection);
+    this.animationBuilder = animationBuilder;
+  }
+
+  /**
+   * @internal
+   */
+  setTopOutlet(outlet: IonRouterOutlet): void {
+    this.topOutlet = outlet;
+  }
+
+  /**
+   * @internal
+   */
+  consumeTransition(): {
+    direction: RouterDirection;
+    animation: NavDirection | undefined;
+    animationBuilder: AnimationBuilder | undefined;
+  } {
+    let direction: RouterDirection = 'root';
+    let animation: NavDirection | undefined;
+    const animationBuilder = this.animationBuilder;
+
+    if (this.direction === 'auto') {
+      direction = this.guessDirection;
+      animation = this.guessAnimation;
+    } else {
+      animation = this.animated;
+      direction = this.direction;
+    }
+    this.direction = DEFAULT_DIRECTION;
+    this.animated = DEFAULT_ANIMATED;
+    this.animationBuilder = undefined;
+
+    return {
+      direction,
+      animation,
+      animationBuilder,
+    };
+  }
+
+  private navigate(url: string | UrlTree | any[], options: NavigationOptions) {
+    if (Array.isArray(url)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      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.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return this.router!.navigateByUrl(urlTree, options);
+    }
+  }
+}
+
+const getAnimation = (
+  direction: RouterDirection,
+  animated: boolean | undefined,
+  animationDirection: 'forward' | 'back' | undefined
+): NavDirection | undefined => {
+  if (animated === false) {
+    return undefined;
+  }
+  if (animationDirection !== undefined) {
+    return animationDirection;
+  }
+  if (direction === 'forward' || direction === 'back') {
+    return direction;
+  } else if (direction === 'root' && animated === true) {
+    return 'forward';
+  }
+  return undefined;
+};
+
+const DEFAULT_DIRECTION = 'auto';
+const DEFAULT_ANIMATED = undefined;

packages/angular/src/providers/picker-controller.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { PickerOptions, pickerController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
+  constructor() {
+    super(pickerController);
+  }
+}

packages/angular/src/providers/platform.ts

@@ -0,0 +1,272 @@
+import { DOCUMENT } from '@angular/common';
+import { NgZone, Inject, Injectable } from '@angular/core';
+import { BackButtonEventDetail, KeyboardEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
+import { Subscription, Subject } from 'rxjs';
+
+// TODO(FW-2827): types
+
+export interface BackButtonEmitter extends Subject<BackButtonEventDetail> {
+  subscribeWithPriority(
+    priority: number,
+    callback: (processNextHandler: () => void) => Promise<any> | void
+  ): Subscription;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Platform {
+  private _readyPromise: Promise<string>;
+  private win: any;
+
+  /**
+   * @hidden
+   */
+  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
+   * application. This event would emit when a Cordova app is put into
+   * the background, however, it would not fire on a standard web browser.
+   */
+  pause = new Subject<void>();
+
+  /**
+   * The resume event emits when the native platform pulls the application
+   * out from the background. This event would emit when a Cordova app comes
+   * out from the background, however, it would not fire on a standard web browser.
+   */
+  resume = new Subject<void>();
+
+  /**
+   * The resize event emits when the browser window has changed dimensions. This
+   * could be from a browser window being physically resized, or from a device
+   * changing orientation.
+   */
+  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)));
+        });
+      };
+
+      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');
+
+      let readyResolve: (value: string) => void;
+      this._readyPromise = new Promise((res) => {
+        readyResolve = res;
+      });
+      if (this.win?.['cordova']) {
+        doc.addEventListener(
+          'deviceready',
+          () => {
+            readyResolve('cordova');
+          },
+          { once: true }
+        );
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        readyResolve!('dom');
+      }
+    });
+  }
+
+  /**
+   * @returns returns true/false based on platform.
+   * @description
+   * Depending on the platform the user is on, `is(platformName)` will
+   * return `true` or `false`. Note that the same app can return `true`
+   * for more than one platform name. For example, an app running from
+   * an iPad would return `true` for the platform names: `mobile`,
+   * `ios`, `ipad`, and `tablet`. Additionally, if the app was running
+   * from Cordova then `cordova` would be true, and if it was running
+   * from a web browser on the iPad then `mobileweb` would be `true`.
+   *
+   * ```
+   * import { Platform } from 'ionic-angular';
+   *
+   * @Component({...})
+   * export MyPage {
+   *   constructor(public platform: Platform) {
+   *     if (this.platform.is('ios')) {
+   *       // This will only print when on iOS
+   *       console.log('I am an iOS device!');
+   *     }
+   *   }
+   * }
+   * ```
+   *
+   * | Platform Name   | Description                        |
+   * |-----------------|------------------------------------|
+   * | android         | on a device running Android.       |
+   * | capacitor       | on a device running Capacitor.     |
+   * | cordova         | on a device running Cordova.       |
+   * | ios             | on a device running iOS.           |
+   * | ipad            | on an iPad device.                 |
+   * | iphone          | on an iPhone device.               |
+   * | phablet         | on a phablet device.               |
+   * | tablet          | on a tablet device.                |
+   * | electron        | in Electron on a desktop device.   |
+   * | pwa             | as a PWA app.                      |
+   * | mobile          | on a mobile device.                |
+   * | mobileweb       | on a mobile device in a browser.   |
+   * | desktop         | on a desktop device.               |
+   * | hybrid          | is a cordova or capacitor app.     |
+   *
+   */
+  is(platformName: Platforms): boolean {
+    return isPlatform(this.win, platformName);
+  }
+
+  /**
+   * @returns the array of platforms
+   * @description
+   * Depending on what device you are on, `platforms` can return multiple values.
+   * Each possible value is a hierarchy of platforms. For example, on an iPhone,
+   * it would return `mobile`, `ios`, and `iphone`.
+   *
+   * ```
+   * import { Platform } from 'ionic-angular';
+   *
+   * @Component({...})
+   * export MyPage {
+   *   constructor(public platform: Platform) {
+   *     // This will print an array of the current platforms
+   *     console.log(this.platform.platforms());
+   *   }
+   * }
+   * ```
+   */
+  platforms(): string[] {
+    return getPlatforms(this.win);
+  }
+
+  /**
+   * Returns a promise when the platform is ready and native functionality
+   * can be called. If the app is running from within a web browser, then
+   * the promise will resolve when the DOM is ready. When the app is running
+   * from an application engine such as Cordova, then the promise will
+   * resolve when Cordova triggers the `deviceready` event.
+   *
+   * The resolved value is the `readySource`, which states which platform
+   * ready was used. For example, when Cordova is ready, the resolved ready
+   * source is `cordova`. The default ready source value will be `dom`. The
+   * `readySource` is useful if different logic should run depending on the
+   * platform the app is running from. For example, only Cordova can execute
+   * the status bar plugin, so the web should not run status bar plugin logic.
+   *
+   * ```
+   * import { Component } from '@angular/core';
+   * import { Platform } from 'ionic-angular';
+   *
+   * @Component({...})
+   * export MyApp {
+   *   constructor(public platform: Platform) {
+   *     this.platform.ready().then((readySource) => {
+   *       console.log('Platform ready from', readySource);
+   *       // Platform now ready, execute any required native code
+   *     });
+   *   }
+   * }
+   * ```
+   */
+  ready(): Promise<string> {
+    return this._readyPromise;
+  }
+
+  /**
+   * Returns if this app is using right-to-left language direction or not.
+   * We recommend the app's `index.html` file already has the correct `dir`
+   * attribute value set, such as `<html dir="ltr">` or `<html dir="rtl">`.
+   * [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir)
+   */
+  get isRTL(): boolean {
+    return this.doc.dir === 'rtl';
+  }
+
+  /**
+   * Get the query string parameter
+   */
+  getQueryParam(key: string): string | null {
+    return readQueryParam(this.win.location.href, key);
+  }
+
+  /**
+   * Returns `true` if the app is in landscape mode.
+   */
+  isLandscape(): boolean {
+    return !this.isPortrait();
+  }
+
+  /**
+   * Returns `true` if the app is in portrait mode.
+   */
+  isPortrait(): boolean {
+    return this.win.matchMedia?.('(orientation: portrait)').matches;
+  }
+
+  testUserAgent(expression: string): boolean {
+    const nav = this.win.navigator;
+    return !!(nav?.userAgent && nav.userAgent.indexOf(expression) >= 0);
+  }
+
+  /**
+   * Get the current url.
+   */
+  url(): string {
+    return this.win.location.href;
+  }
+
+  /**
+   * Gets the width of the platform's viewport using `window.innerWidth`.
+   */
+  width(): number {
+    return this.win.innerWidth;
+  }
+
+  /**
+   * Gets the height of the platform's viewport using `window.innerHeight`.
+   */
+  height(): number {
+    return this.win.innerHeight;
+  }
+}
+
+const readQueryParam = (url: string, key: string) => {
+  key = key.replace(/[[\]\\]/g, '\\$&');
+  const regex = new RegExp('[\\?&]' + key + '=([^&#]*)');
+  const results = regex.exec(url);
+  return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
+};
+
+const proxyEvent = <T>(emitter: Subject<T>, el: EventTarget, eventName: string) => {
+  if (el) {
+    el.addEventListener(eventName, (ev) => {
+      // ?? cordova might emit "null" events
+      const value = ev != null ? (ev as any).detail : undefined;
+      emitter.next(value);
+    });
+  }
+};

packages/angular/src/providers/popover-controller.ts

@@ -0,0 +1,24 @@
+import { Injector, Injectable, inject, EnvironmentInjector } from '@angular/core';
+import { PopoverOptions, popoverController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+import { AngularDelegate } from './angular-delegate';
+
+@Injectable()
+export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
+  private angularDelegate = inject(AngularDelegate);
+  private injector = inject(Injector);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  constructor() {
+    super(popoverController);
+  }
+
+  create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
+    return super.create({
+      ...opts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
+    });
+  }
+}

packages/angular/src/providers/toast-controller.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { ToastOptions, toastController } from '@ionic/core';
+
+import { OverlayBaseController } from '../util/overlay';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
+  constructor() {
+    super(toastController);
+  }
+}

packages/angular/src/schematics/add/files/root/theme/variables.css

@@ -0,0 +1,6 @@
+/* Ionic Variables and Theming. */
+/* This is just a placeholder file For more info, please see: */
+/* https://ionicframework.com/docs/theming/basics */
+
+/* To quickly generate your own theme, check out the color generator */
+/* https://ionicframework.com/docs/theming/color-generator */

packages/angular/src/schematics/add/index.ts

@@ -0,0 +1,141 @@
+import { Path, join } from '@angular-devkit/core';
+import {
+  Rule,
+  SchematicContext,
+  Tree,
+  apply,
+  chain,
+  mergeWith,
+  move,
+  SchematicsException,
+  template,
+  url,
+} from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+
+import { addModuleImportToRootModule } from './../utils/ast';
+import { addArchitectBuilder, addAsset, addStyle, getDefaultAngularAppName } from './../utils/config';
+import { addPackageToPackageJson } from './../utils/package';
+import { Schema as IonAddOptions } from './schema';
+
+function addIonicAngularToPackageJson(): Rule {
+  return (host: Tree) => {
+    addPackageToPackageJson(host, 'dependencies', '@ionic/angular', 'latest');
+    return host;
+  };
+}
+
+function addIonicAngularToolkitToPackageJson(): Rule {
+  return (host: Tree) => {
+    addPackageToPackageJson(host, 'devDependencies', '@ionic/angular-toolkit', 'latest');
+    return host;
+  };
+}
+
+function addIonicAngularModuleToAppModule(projectSourceRoot: Path): Rule {
+  return (host: Tree) => {
+    addModuleImportToRootModule(host, projectSourceRoot, 'IonicModule.forRoot()', '@ionic/angular');
+    return host;
+  };
+}
+
+function addIonicStyles(projectName: string, projectSourceRoot: Path): Rule {
+  return (host: Tree) => {
+    const ionicStyles = [
+      'node_modules/@ionic/angular/css/core.css',
+      'node_modules/@ionic/angular/css/normalize.css',
+      'node_modules/@ionic/angular/css/structure.css',
+      'node_modules/@ionic/angular/css/typography.css',
+      'node_modules/@ionic/angular/css/display.css',
+      'node_modules/@ionic/angular/css/padding.css',
+      'node_modules/@ionic/angular/css/float-elements.css',
+      '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`,
+    ];
+
+    ionicStyles.forEach((entry) => {
+      addStyle(host, projectName, entry);
+    });
+    return host;
+  };
+}
+
+function addIonicons(projectName: string): Rule {
+  return (host: Tree) => {
+    const ioniconsGlob = {
+      glob: '**/*.svg',
+      input: 'node_modules/ionicons/dist/ionicons/svg',
+      output: './svg',
+    };
+    addAsset(host, projectName, 'build', ioniconsGlob);
+    addAsset(host, projectName, 'test', ioniconsGlob);
+    return host;
+  };
+}
+
+function addIonicBuilder(projectName: string): Rule {
+  return (host: Tree) => {
+    addArchitectBuilder(host, projectName, 'ionic-cordova-serve', {
+      builder: '@ionic/angular-toolkit:cordova-serve',
+      options: {
+        cordovaBuildTarget: `${projectName}:ionic-cordova-build`,
+        devServerTarget: `${projectName}:serve`,
+      },
+      configurations: {
+        production: {
+          cordovaBuildTarget: `${projectName}:ionic-cordova-build:production`,
+          devServerTarget: `${projectName}:serve:production`,
+        },
+      },
+    });
+    addArchitectBuilder(host, projectName, 'ionic-cordova-build', {
+      builder: '@ionic/angular-toolkit:cordova-build',
+      options: {
+        browserTarget: `${projectName}:build`,
+      },
+      configurations: {
+        production: {
+          browserTarget: `${projectName}:build:production`,
+        },
+      },
+    });
+    return host;
+  };
+}
+
+function installNodeDeps() {
+  return (_host: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask());
+  };
+}
+
+export default function ngAdd(options: IonAddOptions): Rule {
+  return async (host: Tree) => {
+    const workspace = await getWorkspace(host);
+    if (!options.project) {
+      options.project = getDefaultAngularAppName(workspace);
+    }
+    const project = workspace.projects.get(options.project);
+
+    if (!project || project.extensions.projectType !== 'application') {
+      throw new SchematicsException(`Ionic Add requires a project type of "application".`);
+    }
+    const sourcePath: Path = join(project.sourceRoot as Path);
+    const rootTemplateSource = apply(url('./files/root'), [template({ ...options }), move(sourcePath)]);
+    return chain([
+      // @ionic/angular
+      addIonicAngularToPackageJson(),
+      addIonicAngularToolkitToPackageJson(),
+      addIonicAngularModuleToAppModule(sourcePath),
+      addIonicBuilder(options.project),
+      addIonicStyles(options.project, sourcePath),
+      addIonicons(options.project),
+      mergeWith(rootTemplateSource),
+      // install freshly added dependencies
+      installNodeDeps(),
+    ]);
+  };
+}

packages/angular/src/schematics/add/schema.d.ts

@@ -0,0 +1,3 @@
+export interface Schema {
+  project?: string;
+}

packages/angular/src/schematics/add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ionicNgAdd",
+  "title": "Ionic Add options",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": []
+}

packages/angular/src/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+  "ng-add": {
+      "description": "Add Ionic to your project",
+      "factory": "./add",
+      "schema": "./add/schema.json"
+    }
+  }
+}

packages/angular/src/schematics/utils/ast.ts

@@ -0,0 +1,52 @@
+import { normalize } from '@angular-devkit/core';
+import { Tree, SchematicsException } from '@angular-devkit/schematics';
+import * as ts from 'typescript';
+
+import { addImportToModule } from './devkit-utils/ast-utils';
+import { InsertChange } from './devkit-utils/change';
+
+/**
+ * Reads file given path and returns TypeScript source file.
+ */
+export function getSourceFile(host: Tree, path: string): ts.SourceFile {
+  const buffer = host.read(path);
+  if (!buffer) {
+    throw new SchematicsException(`Could not find file for path: ${path}`);
+  }
+  const content = buffer.toString();
+  const source = ts.createSourceFile(path, content, ts.ScriptTarget.Latest, true);
+  return source;
+}
+
+/**
+ * Import and add module to root app module.
+ */
+export function addModuleImportToRootModule(
+  host: Tree,
+  projectSourceRoot: string,
+  moduleName: string,
+  importSrc: string
+): void {
+  addModuleImportToModule(host, normalize(`${projectSourceRoot}/app/app.module.ts`), moduleName, importSrc);
+}
+
+/**
+ * Import and add module to specific module path.
+ * @param host the tree we are updating
+ * @param modulePath src location of the module to import
+ * @param moduleName name of module to import
+ * @param src src location to import
+ */
+export function addModuleImportToModule(host: Tree, modulePath: string, moduleName: string, src: string): void {
+  const moduleSource = getSourceFile(host, modulePath);
+  const changes = addImportToModule(moduleSource, modulePath, moduleName, src);
+  const recorder = host.beginUpdate(modulePath);
+
+  changes.forEach((change) => {
+    if (change instanceof InsertChange) {
+      recorder.insertLeft(change.pos, change.toAdd);
+    }
+  });
+
+  host.commitUpdate(recorder);
+}

packages/angular/src/schematics/utils/config.ts

@@ -0,0 +1,112 @@
+import { WorkspaceDefinition } from '@angular-devkit/core/src/workspace';
+import { Tree, SchematicsException } from '@angular-devkit/schematics';
+import { parse } from 'jsonc-parser';
+
+const CONFIG_PATH = 'angular.json';
+
+// TODO(FW-2827): types
+
+export function readConfig(host: Tree): any {
+  const sourceText = host.read(CONFIG_PATH)?.toString('utf-8');
+  return JSON.parse(sourceText);
+}
+
+export function writeConfig(host: Tree, config: JSON): void {
+  host.overwrite(CONFIG_PATH, JSON.stringify(config, null, 2));
+}
+
+function isAngularBrowserProject(projectConfig: any): boolean {
+  if (projectConfig.projectType === 'application') {
+    const buildConfig = projectConfig.architect.build;
+    return buildConfig.builder === '@angular-devkit/build-angular:browser';
+  }
+
+  return false;
+}
+
+export function getDefaultAngularAppName(config: any): string {
+  const projects = config.projects;
+  const projectNames = Object.keys(projects);
+
+  for (const projectName of projectNames) {
+    const projectConfig = projects[projectName];
+    if (isAngularBrowserProject(projectConfig)) {
+      return projectName;
+    }
+  }
+
+  return projectNames[0];
+}
+
+export function getAngularAppConfig(config: any, projectName: string): any | never {
+  // eslint-disable-next-line no-prototype-builtins
+  if (!config.projects.hasOwnProperty(projectName)) {
+    throw new SchematicsException(`Could not find project: ${projectName}`);
+  }
+
+  const projectConfig = config.projects[projectName];
+  if (isAngularBrowserProject(projectConfig)) {
+    return projectConfig;
+  }
+
+  if (config.projectType !== 'application') {
+    throw new SchematicsException(`Invalid projectType for ${projectName}: ${config.projectType}`);
+  } else {
+    const buildConfig = projectConfig.architect.build;
+    throw new SchematicsException(`Invalid builder for ${projectName}: ${buildConfig.builder}`);
+  }
+}
+
+export function addStyle(host: Tree, projectName: string, stylePath: string): void {
+  const config = readConfig(host);
+  const appConfig = getAngularAppConfig(config, projectName);
+  appConfig.architect.build.options.styles.push({
+    input: stylePath,
+  });
+  writeConfig(host, config);
+}
+
+export function addAsset(
+  host: Tree,
+  projectName: string,
+  architect: string,
+  asset: string | { glob: string; input: string; output: string }
+): void {
+  const config = readConfig(host);
+  const appConfig = getAngularAppConfig(config, projectName);
+  const target = appConfig.architect[architect];
+  if (target) {
+    target.options.assets.push(asset);
+    writeConfig(host, 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);
+}
+
+export function getWorkspacePath(host: Tree): string {
+  const possibleFiles = ['/angular.json', '/.angular.json'];
+  const path = possibleFiles.filter((path) => host.exists(path))[0];
+
+  return path;
+}
+
+export function getWorkspace(host: Tree): WorkspaceDefinition {
+  const path = getWorkspacePath(host);
+  const configBuffer = host.read(path);
+  if (configBuffer === null) {
+    throw new SchematicsException(`Could not find (${path})`);
+  }
+  const content = configBuffer.toString();
+
+  return parse(content) as WorkspaceDefinition;
+}

packages/angular/src/schematics/utils/devkit-utils/ast-utils.ts

@@ -0,0 +1,579 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as ts from 'typescript';
+
+import { Change, InsertChange, NoopChange } from './change';
+
+/**
+ * Add Import `import { symbolName } from fileName` if the import doesn't exit
+ * already. Assumes fileToEdit can be resolved and accessed.
+ * @param fileToEdit (file we want to add import to)
+ * @param symbolName (item to import)
+ * @param fileName (path to the file)
+ * @param isDefault (if true, import follows style for importing default exports)
+ * @return Change
+ */
+export function insertImport(
+  source: ts.SourceFile,
+  fileToEdit: string,
+  symbolName: string,
+  fileName: string,
+  isDefault = false
+): Change {
+  const rootNode = source;
+  const allImports = findNodes(rootNode, ts.SyntaxKind.ImportDeclaration);
+
+  // get nodes that map to import statements from the file fileName
+  const relevantImports = allImports.filter((node) => {
+    // StringLiteral of the ImportDeclaration is the import file (fileName in this case).
+    const importFiles = node
+      .getChildren()
+      .filter((child) => child.kind === ts.SyntaxKind.StringLiteral)
+      .map((n) => (n as ts.StringLiteral).text);
+
+    return importFiles.filter((file) => file === fileName).length === 1;
+  });
+
+  if (relevantImports.length > 0) {
+    let importsAsterisk = false;
+    // imports from import file
+    const imports: ts.Node[] = [];
+    relevantImports.forEach((n) => {
+      Array.prototype.push.apply(imports, findNodes(n, ts.SyntaxKind.Identifier));
+      if (findNodes(n, ts.SyntaxKind.AsteriskToken).length > 0) {
+        importsAsterisk = true;
+      }
+    });
+
+    // if imports * from fileName, don't add symbolName
+    if (importsAsterisk) {
+      return new NoopChange();
+    }
+
+    const importTextNodes = imports.filter((n) => (n as ts.Identifier).text === symbolName);
+
+    // insert import if it's not there
+    if (importTextNodes.length === 0) {
+      const fallbackPos =
+        findNodes(relevantImports[0], ts.SyntaxKind.CloseBraceToken)[0].getStart() ||
+        findNodes(relevantImports[0], ts.SyntaxKind.FromKeyword)[0].getStart();
+
+      return insertAfterLastOccurrence(imports, `, ${symbolName}`, fileToEdit, fallbackPos);
+    }
+
+    return new NoopChange();
+  }
+
+  // no such import declaration exists
+  const useStrict = findNodes(rootNode, ts.SyntaxKind.StringLiteral).filter(
+    (n: ts.StringLiteral) => n.text === 'use strict'
+  );
+  let fallbackPos = 0;
+  if (useStrict.length > 0) {
+    fallbackPos = useStrict[0].end;
+  }
+  const open = isDefault ? '' : '{ ';
+  const close = isDefault ? '' : ' }';
+  // if there are no imports or 'use strict' statement, insert import at beginning of file
+  const insertAtBeginning = allImports.length === 0 && useStrict.length === 0;
+  const separator = insertAtBeginning ? '' : ';\n';
+  const toInsert =
+    `${separator}import ${open}${symbolName}${close}` + ` from '${fileName}'${insertAtBeginning ? ';\n' : ''}`;
+
+  return insertAfterLastOccurrence(allImports, toInsert, fileToEdit, fallbackPos, ts.SyntaxKind.StringLiteral);
+}
+
+/**
+ * Find all nodes from the AST in the subtree of node of SyntaxKind kind.
+ * @param node
+ * @param kind
+ * @param max The maximum number of items to return.
+ * @return all nodes of kind, or [] if none is found
+ */
+export function findNodes(node: ts.Node, kind: ts.SyntaxKind, max = Infinity): ts.Node[] {
+  if (!node || max == 0) {
+    return [];
+  }
+
+  const arr: ts.Node[] = [];
+  if (node.kind === kind) {
+    arr.push(node);
+    max--;
+  }
+  if (max > 0) {
+    for (const child of node.getChildren()) {
+      findNodes(child, kind, max).forEach((node) => {
+        if (max > 0) {
+          arr.push(node);
+        }
+        max--;
+      });
+
+      if (max <= 0) {
+        break;
+      }
+    }
+  }
+
+  return arr;
+}
+
+/**
+ * Get all the nodes from a source.
+ * @param sourceFile The source file object.
+ * @returns {Observable<ts.Node>} An observable of all the nodes in the source.
+ */
+export function getSourceNodes(sourceFile: ts.SourceFile): ts.Node[] {
+  const nodes: ts.Node[] = [sourceFile];
+  const result = [];
+
+  while (nodes.length > 0) {
+    const node = nodes.shift();
+
+    if (node) {
+      result.push(node);
+      if (node.getChildCount(sourceFile) >= 0) {
+        nodes.unshift(...node.getChildren());
+      }
+    }
+  }
+
+  return result;
+}
+
+export function findNode(node: ts.Node, kind: ts.SyntaxKind, text: string): ts.Node | null {
+  if (node.kind === kind && node.getText() === text) {
+    // throw new Error(node.getText());
+    return node;
+  }
+
+  let foundNode: ts.Node | null = null;
+  ts.forEachChild(node, (childNode) => {
+    foundNode = foundNode || findNode(childNode, kind, text);
+  });
+
+  return foundNode;
+}
+
+/**
+ * Helper for sorting nodes.
+ * @return function to sort nodes in increasing order of position in sourceFile
+ */
+function nodesByPosition(first: ts.Node, second: ts.Node): number {
+  return first.getStart() - second.getStart();
+}
+
+/**
+ * Insert `toInsert` after the last occurence of `ts.SyntaxKind[nodes[i].kind]`
+ * or after the last of occurence of `syntaxKind` if the last occurence is a sub child
+ * of ts.SyntaxKind[nodes[i].kind] and save the changes in file.
+ *
+ * @param nodes insert after the last occurence of nodes
+ * @param toInsert string to insert
+ * @param file file to insert changes into
+ * @param fallbackPos position to insert if toInsert happens to be the first occurence
+ * @param syntaxKind the ts.SyntaxKind of the subchildren to insert after
+ * @return Change instance
+ * @throw Error if toInsert is first occurence but fall back is not set
+ */
+export function insertAfterLastOccurrence(
+  nodes: ts.Node[],
+  toInsert: string,
+  file: string,
+  fallbackPos: number,
+  syntaxKind?: ts.SyntaxKind
+): Change {
+  // sort() has a side effect, so make a copy so that we won't overwrite the parent's object.
+  let lastItem = [...nodes].sort(nodesByPosition).pop();
+  if (!lastItem) {
+    throw new Error();
+  }
+  if (syntaxKind) {
+    lastItem = findNodes(lastItem, syntaxKind).sort(nodesByPosition).pop();
+  }
+  if (!lastItem && fallbackPos == undefined) {
+    throw new Error(`tried to insert ${toInsert} as first occurence with no fallback position`);
+  }
+  const lastItemPosition: number = lastItem ? lastItem.getEnd() : fallbackPos;
+
+  return new InsertChange(file, lastItemPosition, toInsert);
+}
+
+export function getContentOfKeyLiteral(_source: ts.SourceFile, node: ts.Node): string | null {
+  if (node.kind == ts.SyntaxKind.Identifier) {
+    return (node as ts.Identifier).text;
+  } else if (node.kind == ts.SyntaxKind.StringLiteral) {
+    return (node as ts.StringLiteral).text;
+  } else {
+    return null;
+  }
+}
+
+function _angularImportsFromNode(
+  node: ts.ImportDeclaration,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _sourceFile: ts.SourceFile
+): { [name: string]: string } {
+  const ms = node.moduleSpecifier;
+  let modulePath: string;
+  switch (ms.kind) {
+    case ts.SyntaxKind.StringLiteral:
+      modulePath = (ms as ts.StringLiteral).text;
+      break;
+    default:
+      return {};
+  }
+
+  if (!modulePath.startsWith('@angular/')) {
+    return {};
+  }
+
+  if (node.importClause) {
+    if (node.importClause.name) {
+      // This is of the form `import Name from 'path'`. Ignore.
+      return {};
+    } else if (node.importClause.namedBindings) {
+      const nb = node.importClause.namedBindings;
+      if (nb.kind == ts.SyntaxKind.NamespaceImport) {
+        // This is of the form `import * as name from 'path'`. Return `name.`.
+        return {
+          [(nb as ts.NamespaceImport).name.text + '.']: modulePath,
+        };
+      } else {
+        // This is of the form `import {a,b,c} from 'path'`
+        const namedImports = nb as ts.NamedImports;
+
+        return namedImports.elements
+          .map((is: ts.ImportSpecifier) => (is.propertyName ? is.propertyName.text : is.name.text))
+          .reduce((acc: { [name: string]: string }, curr: string) => {
+            acc[curr] = modulePath;
+
+            return acc;
+          }, {});
+      }
+    }
+
+    return {};
+  } else {
+    // This is of the form `import 'path';`. Nothing to do.
+    return {};
+  }
+}
+
+export function getDecoratorMetadata(source: ts.SourceFile, identifier: string, module: string): ts.Node[] {
+  const angularImports: { [name: string]: string } = findNodes(source, ts.SyntaxKind.ImportDeclaration)
+    .map((node: ts.ImportDeclaration) => _angularImportsFromNode(node, source))
+    .reduce((acc: { [name: string]: string }, current: { [name: string]: string }) => {
+      for (const key of Object.keys(current)) {
+        acc[key] = current[key];
+      }
+
+      return acc;
+    }, {});
+
+  return getSourceNodes(source)
+    .filter((node) => {
+      return (
+        node.kind == ts.SyntaxKind.Decorator && (node as ts.Decorator).expression.kind == ts.SyntaxKind.CallExpression
+      );
+    })
+    .map((node) => (node as ts.Decorator).expression as ts.CallExpression)
+    .filter((expr) => {
+      if (expr.expression.kind == ts.SyntaxKind.Identifier) {
+        const id = expr.expression as ts.Identifier;
+
+        return id.getFullText(source) == identifier && angularImports[id.getFullText(source)] === module;
+      } else if (expr.expression.kind == ts.SyntaxKind.PropertyAccessExpression) {
+        // This covers foo.NgModule when importing * as foo.
+        const paExpr = expr.expression as ts.PropertyAccessExpression;
+        // If the left expression is not an identifier, just give up at that point.
+        if (paExpr.expression.kind !== ts.SyntaxKind.Identifier) {
+          return false;
+        }
+
+        const id = paExpr.name.text;
+        const moduleId = (paExpr.expression as ts.Identifier).getText(source);
+
+        return id === identifier && angularImports[moduleId + '.'] === module;
+      }
+
+      return false;
+    })
+    .filter((expr) => expr.arguments[0] && expr.arguments[0].kind == ts.SyntaxKind.ObjectLiteralExpression)
+    .map((expr) => expr.arguments[0] as ts.ObjectLiteralExpression);
+}
+
+function findClassDeclarationParent(node: ts.Node): ts.ClassDeclaration | undefined {
+  if (ts.isClassDeclaration(node)) {
+    return node;
+  }
+
+  return node.parent && findClassDeclarationParent(node.parent);
+}
+
+/**
+ * Given a source file with @NgModule class(es), find the name of the first @NgModule class.
+ *
+ * @param source source file containing one or more @NgModule
+ * @returns the name of the first @NgModule, or `undefined` if none is found
+ */
+export function getFirstNgModuleName(source: ts.SourceFile): string | undefined {
+  // First, find the @NgModule decorators.
+  const ngModulesMetadata = getDecoratorMetadata(source, 'NgModule', '@angular/core');
+  if (ngModulesMetadata.length === 0) {
+    return undefined;
+  }
+
+  // Then walk parent pointers up the AST, looking for the ClassDeclaration parent of the NgModule
+  // metadata.
+  const moduleClass = findClassDeclarationParent(ngModulesMetadata[0]);
+  if (!moduleClass?.name) {
+    return undefined;
+  }
+
+  // Get the class name of the module ClassDeclaration.
+  return moduleClass.name.text;
+}
+
+export function addSymbolToNgModuleMetadata(
+  source: ts.SourceFile,
+  ngModulePath: string,
+  metadataField: string,
+  symbolName: string,
+  importPath: string | null = null
+): Change[] {
+  const nodes = getDecoratorMetadata(source, 'NgModule', '@angular/core');
+  let node: any = nodes[0]; // tslint:disable-line:no-any
+
+  // Find the decorator declaration.
+  if (!node) {
+    return [];
+  }
+
+  // Get all the children property assignment of object literals.
+  const matchingProperties: ts.ObjectLiteralElement[] = (node as ts.ObjectLiteralExpression).properties
+    .filter((prop) => prop.kind == ts.SyntaxKind.PropertyAssignment)
+    // Filter out every fields that's not "metadataField". Also handles string literals
+    // (but not expressions).
+    .filter((prop: ts.PropertyAssignment) => {
+      const name = prop.name;
+      switch (name.kind) {
+        case ts.SyntaxKind.Identifier:
+          return (name as ts.Identifier).getText(source) == metadataField;
+        case ts.SyntaxKind.StringLiteral:
+          return (name as ts.StringLiteral).text == metadataField;
+      }
+
+      return false;
+    });
+
+  // Get the last node of the array literal.
+  if (!matchingProperties) {
+    return [];
+  }
+  if (matchingProperties.length == 0) {
+    // We haven't found the field in the metadata declaration. Insert a new field.
+    const expr = node as ts.ObjectLiteralExpression;
+    let position: number;
+    let toInsert: string;
+    if (expr.properties.length == 0) {
+      position = expr.getEnd() - 1;
+      toInsert = `  ${metadataField}: [${symbolName}]\n`;
+    } else {
+      node = expr.properties[expr.properties.length - 1];
+      position = node.getEnd();
+      // Get the indentation of the last element, if any.
+      const text = node.getFullText(source);
+      const matches = text.match(/^\r?\n\s*/);
+      if (matches.length > 0) {
+        toInsert = `,${matches[0]}${metadataField}: [${symbolName}]`;
+      } else {
+        toInsert = `, ${metadataField}: [${symbolName}]`;
+      }
+    }
+    if (importPath !== null) {
+      return [
+        new InsertChange(ngModulePath, position, toInsert),
+        insertImport(source, ngModulePath, symbolName.replace(/\..*$/, ''), importPath),
+      ];
+    } else {
+      return [new InsertChange(ngModulePath, position, toInsert)];
+    }
+  }
+  const assignment = matchingProperties[0] as ts.PropertyAssignment;
+
+  // If it's not an array, nothing we can do really.
+  if (assignment.initializer.kind !== ts.SyntaxKind.ArrayLiteralExpression) {
+    return [];
+  }
+
+  const arrLiteral = assignment.initializer as ts.ArrayLiteralExpression;
+  if (arrLiteral.elements.length == 0) {
+    // Forward the property.
+    node = arrLiteral;
+  } else {
+    node = arrLiteral.elements;
+  }
+
+  if (!node) {
+    console.log('No app module found. Please add your new class to your component.');
+
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const nodeArray = node as {} as ts.Node[];
+    const symbolsArray = nodeArray.map((node) => node.getText());
+    if (symbolsArray.includes(symbolName)) {
+      return [];
+    }
+
+    node = node[node.length - 1];
+  }
+
+  let toInsert: string;
+  let position = node.getEnd();
+  if (node.kind == ts.SyntaxKind.ObjectLiteralExpression) {
+    // We haven't found the field in the metadata declaration. Insert a new
+    // field.
+    const expr = node as ts.ObjectLiteralExpression;
+    if (expr.properties.length == 0) {
+      position = expr.getEnd() - 1;
+      toInsert = `  ${metadataField}: [${symbolName}]\n`;
+    } else {
+      node = expr.properties[expr.properties.length - 1];
+      position = node.getEnd();
+      // Get the indentation of the last element, if any.
+      const text = node.getFullText(source);
+      if (text.match('^\r?\r?\n')) {
+        toInsert = `,${text.match(/^\r?\n\s+/)[0]}${metadataField}: [${symbolName}]`;
+      } else {
+        toInsert = `, ${metadataField}: [${symbolName}]`;
+      }
+    }
+  } else if (node.kind == ts.SyntaxKind.ArrayLiteralExpression) {
+    // We found the field but it's empty. Insert it just before the `]`.
+    position--;
+    toInsert = `${symbolName}`;
+  } else {
+    // Get the indentation of the last element, if any.
+    const text = node.getFullText(source);
+    if (text.match(/^\r?\n/)) {
+      toInsert = `,${text.match(/^\r?\n(\r?)\s+/)[0]}${symbolName}`;
+    } else {
+      toInsert = `, ${symbolName}`;
+    }
+  }
+  if (importPath !== null) {
+    return [
+      new InsertChange(ngModulePath, position, toInsert),
+      insertImport(source, ngModulePath, symbolName.replace(/\..*$/, ''), importPath),
+    ];
+  }
+
+  return [new InsertChange(ngModulePath, position, toInsert)];
+}
+
+/**
+ * Custom function to insert a declaration (component, pipe, directive)
+ * into NgModule declarations. It also imports the component.
+ */
+export function addDeclarationToModule(
+  source: ts.SourceFile,
+  modulePath: string,
+  classifiedName: string,
+  importPath: string
+): Change[] {
+  return addSymbolToNgModuleMetadata(source, modulePath, 'declarations', classifiedName, importPath);
+}
+
+/**
+ * Custom function to insert an NgModule into NgModule imports. It also imports the module.
+ */
+export function addImportToModule(
+  source: ts.SourceFile,
+  modulePath: string,
+  classifiedName: string,
+  importPath: string
+): Change[] {
+  return addSymbolToNgModuleMetadata(source, modulePath, 'imports', classifiedName, importPath);
+}
+
+/**
+ * Custom function to insert a provider into NgModule. It also imports it.
+ */
+export function addProviderToModule(
+  source: ts.SourceFile,
+  modulePath: string,
+  classifiedName: string,
+  importPath: string
+): Change[] {
+  return addSymbolToNgModuleMetadata(source, modulePath, 'providers', classifiedName, importPath);
+}
+
+/**
+ * Custom function to insert an export into NgModule. It also imports it.
+ */
+export function addExportToModule(
+  source: ts.SourceFile,
+  modulePath: string,
+  classifiedName: string,
+  importPath: string
+): Change[] {
+  return addSymbolToNgModuleMetadata(source, modulePath, 'exports', classifiedName, importPath);
+}
+
+/**
+ * Custom function to insert an export into NgModule. It also imports it.
+ */
+export function addBootstrapToModule(
+  source: ts.SourceFile,
+  modulePath: string,
+  classifiedName: string,
+  importPath: string
+): Change[] {
+  return addSymbolToNgModuleMetadata(source, modulePath, 'bootstrap', classifiedName, importPath);
+}
+
+/**
+ * Custom function to insert an entryComponent into NgModule. It also imports it.
+ */
+export function addEntryComponentToModule(
+  source: ts.SourceFile,
+  modulePath: string,
+  classifiedName: string,
+  importPath: string
+): Change[] {
+  return addSymbolToNgModuleMetadata(source, modulePath, 'entryComponents', classifiedName, importPath);
+}
+
+/**
+ * Determine if an import already exists.
+ */
+export function isImported(source: ts.SourceFile, classifiedName: string, importPath: string): boolean {
+  const allNodes = getSourceNodes(source);
+  const matchingNodes = allNodes
+    .filter((node) => node.kind === ts.SyntaxKind.ImportDeclaration)
+    .filter((imp: ts.ImportDeclaration) => imp.moduleSpecifier.kind === ts.SyntaxKind.StringLiteral)
+    .filter((imp: ts.ImportDeclaration) => {
+      return (imp.moduleSpecifier as ts.StringLiteral).text === importPath;
+    })
+    .filter((imp: ts.ImportDeclaration) => {
+      if (!imp.importClause) {
+        return false;
+      }
+      const nodes = findNodes(imp.importClause, ts.SyntaxKind.ImportSpecifier).filter(
+        (n) => n.getText() === classifiedName
+      );
+
+      return nodes.length > 0;
+    });
+
+  return matchingNodes.length > 0;
+}

packages/angular/src/schematics/utils/devkit-utils/change.ts

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+export interface Host {
+  write(path: string, content: string): Promise<void>;
+  read(path: string): Promise<string>;
+}
+
+export interface Change {
+  apply(host: Host): Promise<void>;
+
+  // The file this change should be applied to. Some changes might not apply to
+  // a file (maybe the config).
+  readonly path: string | null;
+
+  // The order this change should be applied. Normally the position inside the file.
+  // Changes are applied from the bottom of a file to the top.
+  readonly order: number;
+
+  // The description of this change. This will be outputted in a dry or verbose run.
+  readonly description: string;
+}
+
+/**
+ * An operation that does nothing.
+ */
+export class NoopChange implements Change {
+  description = 'No operation.';
+  order = Infinity;
+  path = null;
+  apply(): Promise<void> {
+    return Promise.resolve();
+  }
+}
+
+/**
+ * Will add text to the source code.
+ */
+export class InsertChange implements Change {
+  order: number;
+  description: string;
+
+  constructor(public path: string, public pos: number, public toAdd: string) {
+    if (pos < 0) {
+      throw new Error('Negative positions are invalid');
+    }
+    this.description = `Inserted ${toAdd} into position ${pos} of ${path}`;
+    this.order = pos;
+  }
+
+  /**
+   * This method does not insert spaces if there is none in the original string.
+   */
+  apply(host: Host): Promise<void> {
+    return host.read(this.path).then((content) => {
+      const prefix = content.substring(0, this.pos);
+      const suffix = content.substring(this.pos);
+
+      return host.write(this.path, `${prefix}${this.toAdd}${suffix}`);
+    });
+  }
+}
+
+/**
+ * Will remove text from the source code.
+ */
+export class RemoveChange implements Change {
+  order: number;
+  description: string;
+
+  constructor(public path: string, private pos: number, private toRemove: string) {
+    if (pos < 0) {
+      throw new Error('Negative positions are invalid');
+    }
+    this.description = `Removed ${toRemove} into position ${pos} of ${path}`;
+    this.order = pos;
+  }
+
+  apply(host: Host): Promise<void> {
+    return host.read(this.path).then((content) => {
+      const prefix = content.substring(0, this.pos);
+      const suffix = content.substring(this.pos + this.toRemove.length);
+
+      // TODO: throw error if toRemove doesn't match removed string.
+      return host.write(this.path, `${prefix}${suffix}`);
+    });
+  }
+}
+
+/**
+ * Will replace text from the source code.
+ */
+export class ReplaceChange implements Change {
+  order: number;
+  description: string;
+
+  constructor(public path: string, private pos: number, private oldText: string, private newText: string) {
+    if (pos < 0) {
+      throw new Error('Negative positions are invalid');
+    }
+    this.description = `Replaced ${oldText} into position ${pos} of ${path} with ${newText}`;
+    this.order = pos;
+  }
+
+  apply(host: Host): Promise<void> {
+    return host.read(this.path).then((content) => {
+      const prefix = content.substring(0, this.pos);
+      const suffix = content.substring(this.pos + this.oldText.length);
+      const text = content.substring(this.pos, this.pos + this.oldText.length);
+
+      if (text !== this.oldText) {
+        return Promise.reject(new Error(`Invalid replace: "${text}" != "${this.oldText}".`));
+      }
+
+      // TODO: throw error if oldText doesn't match removed string.
+      return host.write(this.path, `${prefix}${this.newText}${suffix}`);
+    });
+  }
+}

packages/angular/src/schematics/utils/devkit-utils/readme.md

@@ -0,0 +1,5 @@
+### Devkit Utils
+
+These are utility files copied over from `@angular-devkit`.
+They are not exported so they need to be manually copied over.
+Please do not edit directly.

packages/angular/src/schematics/utils/devkit-utils/route-utils.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as ts from 'typescript';
+
+import { findNodes, insertAfterLastOccurrence } from './ast-utils';
+import { Change, NoopChange } from './change';
+
+/**
+ * Add Import `import { symbolName } from fileName` if the import doesn't exit
+ * already. Assumes fileToEdit can be resolved and accessed.
+ * @param fileToEdit (file we want to add import to)
+ * @param symbolName (item to import)
+ * @param fileName (path to the file)
+ * @param isDefault (if true, import follows style for importing default exports)
+ * @return Change
+ */
+
+export function insertImport(
+  source: ts.SourceFile,
+  fileToEdit: string,
+  symbolName: string,
+  fileName: string,
+  isDefault = false
+): Change {
+  const rootNode = source;
+  const allImports = findNodes(rootNode, ts.SyntaxKind.ImportDeclaration);
+
+  // get nodes that map to import statements from the file fileName
+  const relevantImports = allImports.filter((node) => {
+    // StringLiteral of the ImportDeclaration is the import file (fileName in this case).
+    const importFiles = node
+      .getChildren()
+      .filter((child) => child.kind === ts.SyntaxKind.StringLiteral)
+      .map((n) => (n as ts.StringLiteral).text);
+
+    return importFiles.filter((file) => file === fileName).length === 1;
+  });
+
+  if (relevantImports.length > 0) {
+    let importsAsterisk = false;
+    // imports from import file
+    const imports: ts.Node[] = [];
+    relevantImports.forEach((n) => {
+      Array.prototype.push.apply(imports, findNodes(n, ts.SyntaxKind.Identifier));
+      if (findNodes(n, ts.SyntaxKind.AsteriskToken).length > 0) {
+        importsAsterisk = true;
+      }
+    });
+
+    // if imports * from fileName, don't add symbolName
+    if (importsAsterisk) {
+      return new NoopChange();
+    }
+
+    const importTextNodes = imports.filter((n) => (n as ts.Identifier).text === symbolName);
+
+    // insert import if it's not there
+    if (importTextNodes.length === 0) {
+      const fallbackPos =
+        findNodes(relevantImports[0], ts.SyntaxKind.CloseBraceToken)[0].getStart() ||
+        findNodes(relevantImports[0], ts.SyntaxKind.FromKeyword)[0].getStart();
+
+      return insertAfterLastOccurrence(imports, `, ${symbolName}`, fileToEdit, fallbackPos);
+    }
+
+    return new NoopChange();
+  }
+
+  // no such import declaration exists
+  const useStrict = findNodes(rootNode, ts.SyntaxKind.StringLiteral).filter(
+    (n: ts.StringLiteral) => n.text === 'use strict'
+  );
+  let fallbackPos = 0;
+  if (useStrict.length > 0) {
+    fallbackPos = useStrict[0].end;
+  }
+  const open = isDefault ? '' : '{ ';
+  const close = isDefault ? '' : ' }';
+  // if there are no imports or 'use strict' statement, insert import at beginning of file
+  const insertAtBeginning = allImports.length === 0 && useStrict.length === 0;
+  const separator = insertAtBeginning ? '' : ';\n';
+  const toInsert =
+    `${separator}import ${open}${symbolName}${close}` + ` from '${fileName}'${insertAtBeginning ? ';\n' : ''}`;
+
+  return insertAfterLastOccurrence(allImports, toInsert, fileToEdit, fallbackPos, ts.SyntaxKind.StringLiteral);
+}

packages/angular/src/schematics/utils/package.ts

@@ -0,0 +1,22 @@
+import { Tree } from '@angular-devkit/schematics';
+
+/**
+ * Adds a package to the package.json
+ */
+export function addPackageToPackageJson(host: Tree, type: string, pkg: string, version: string): Tree {
+  if (host.exists('package.json')) {
+    const sourceText = host.read('package.json')?.toString('utf-8');
+    const json = JSON.parse(sourceText);
+    if (!json[type]) {
+      json[type] = {};
+    }
+
+    if (!json[type][pkg]) {
+      json[type][pkg] = version;
+    }
+
+    host.overwrite('package.json', JSON.stringify(json, null, 2));
+  }
+
+  return host;
+}

packages/angular/src/types/interfaces.ts

@@ -0,0 +1,14 @@
+export interface IonicGlobal {
+  config?: any; // TODO(FW-2827): type
+  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;
+}

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

@@ -0,0 +1,31 @@
+/**
+ *  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;
+}

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

@@ -0,0 +1,51 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+
+export class IonicRouteStrategy implements RouteReuseStrategy {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldDetach(_route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldAttach(_route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  store(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _route: ActivatedRouteSnapshot,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _detachedTree: DetachedRouteHandle
+  ): void {
+    return;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  retrieve(_route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
+    return null;
+  }
+
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    if (future.routeConfig !== curr.routeConfig) {
+      return false;
+    }
+
+    // checking router params
+    const futureParams = future.params;
+    const currentParams = curr.params;
+    const keysA = Object.keys(futureParams);
+    const keysB = Object.keys(currentParams);
+
+    if (keysA.length !== keysB.length) {
+      return false;
+    }
+
+    // Test for A's keys different from B.
+    for (const key of keysA) {
+      if (currentParams[key] !== futureParams[key]) {
+        return false;
+      }
+    }
+    return true;
+  }
+}

packages/angular/src/util/overlay.ts

@@ -0,0 +1,32 @@
+// TODO(FW-2827): types
+
+interface ControllerShape<Opts, HTMLElm> {
+  create(options: Opts): Promise<HTMLElm>;
+  dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
+  getTop(): Promise<HTMLElm | undefined>;
+}
+
+export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opts, Overlay> {
+  constructor(private ctrl: ControllerShape<Opts, Overlay>) {}
+
+  /**
+   * Creates a new overlay
+   */
+  create(opts?: Opts): Promise<Overlay> {
+    return this.ctrl.create((opts || {}) as any);
+  }
+
+  /**
+   * When `id` is not provided, it dismisses the top overlay.
+   */
+  dismiss(data?: any, role?: string, id?: string): Promise<boolean> {
+    return this.ctrl.dismiss(data, role, id);
+  }
+
+  /**
+   * Returns the top overlay.
+   */
+  getTop(): Promise<Overlay | undefined> {
+    return this.ctrl.getTop();
+  }
+}

packages/angular/src/util/util.ts

@@ -0,0 +1,12 @@
+declare const __zone_symbol__requestAnimationFrame: any;
+declare const requestAnimationFrame: any;
+
+export const raf = (h: any): any => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(h);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(h);
+  }
+  return setTimeout(h);
+};