feat(angular): add support for custom elements build

angular/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@ionic/core": "6.0.0-rc.2",
+    "ionicons": "^6.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
@@ -87,6 +88,7 @@
     },
     "allowedNonPeerDependencies": [
       "@ionic/core",
+      "ionicons",
       "jsonc-parser"
     ]
   }

angular/src/app-initialize.ts

@@ -1,6 +1,5 @@
 import { NgZone } from '@angular/core';
-import { setupConfig } from '@ionic/core';
-import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
+import { initialize } from '@ionic/core/components';
 
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
@@ -10,28 +9,22 @@ 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);
-          },
-        });
+      initialize({
+        ...config,
+        _zoneGate: (h: any) => zone.run(h),
+        _ael: (elm, eventName, cb, opts) => {
+          (elm as any)[aelFn](eventName, cb, opts);
+        },
+        _rel: (elm, eventName, cb, opts) => {
+          elm.removeEventListener(eventName, cb, opts);
+        },
+        _jmp: (h: any) => zone.runOutsideAngular(h),
+        _raf: raf
       });
+
     }
   };
 };

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

@@ -32,13 +32,28 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
 }
 
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator = function(cls: any) {
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
+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: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { tagName, customElement, inputs, methods } = opts;
+
+    defineCustomElement(tagName, customElement);
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
+    if (methods) {
+      proxyMethods(cls, methods);
     }
     return cls;
   };

angular/src/directives/ion-icon.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+/* tslint:disable */
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
+import { Components } from "ionicons";
+import 'ionicons';
+
+
+import { ProxyCmp } from './angular-component-lib/utils';
+
+export declare interface IonIcon extends Components.IonIcon {}
+@ProxyCmp({
+  tagName: 'ion-icon',
+  customElement: undefined,
+  inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
+})
+@Component({
+  selector: 'ion-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
+})
+export class IonIcon {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}

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

@@ -1,11 +1,17 @@
 import { Directive, HostListener, Input, Optional } from '@angular/core';
-import { AnimationBuilder } from '@ionic/core';
+import { AnimationBuilder } from '@ionic/core/components';
 
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
 
 import { IonRouterOutlet } from './ion-router-outlet';
+import { IonBackButton as IonBackButtonCmp } from "@ionic/core/components/ion-back-button";
+import { ProxyCmp } from '../angular-component-lib/utils';
 
+@ProxyCmp({
+  tagName: 'ion-back-button',
+  customElement: IonBackButtonCmp
+})
 @Directive({
   selector: 'ion-back-button',
 })

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

@@ -16,7 +16,7 @@ import {
   SkipSelf,
 } from '@angular/core';
 import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET } from '@angular/router';
-import { componentOnReady } from '@ionic/core';
+import { componentOnReady } from '@ionic/core/components';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
 
@@ -27,6 +27,13 @@ import { NavController } from '../../providers/nav-controller';
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
 
+import { IonRouterOutlet as IonRouterOutletCmp } from "@ionic/core/components/ion-router-outlet.js";
+import { ProxyCmp } from '../angular-component-lib/utils';
+console.log('router-outlet-source');
+@ProxyCmp({
+  tagName: 'ion-router-outlet',
+  customElement: IonRouterOutletCmp
+})
 @Directive({
   selector: 'ion-router-outlet',
   exportAs: 'outlet',

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

@@ -2,8 +2,10 @@ import { ComponentFactoryResolver, ElementRef, Injector, ViewContainerRef, Direc
 
 import { AngularDelegate } from '../../providers/angular-delegate';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
-
+import { IonNav as IonNavCmp } from "@ionic/core/components/ion-nav";
 @ProxyCmp({
+  tagName: 'ion-nav',
+  customElement: IonNavCmp,
   inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
   methods: [
     'push',

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

@@ -1,7 +1,7 @@
 import { LocationStrategy } from '@angular/common';
 import { ElementRef, OnChanges, OnDestroy, OnInit, Directive, HostListener, Input, Optional } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
-import { AnimationBuilder, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, RouterDirection } from '@ionic/core/components';
 import { Subscription } from 'rxjs';
 
 import { NavController } from '../../providers/nav-controller';

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

@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AnimationBuilder, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, RouterDirection } from '@ionic/core/components';
 
 import { bindLifecycleEvents } from '../../providers/angular-delegate';
 import { NavController } from '../../providers/nav-controller';

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

@@ -1,6 +1,6 @@
 import { ComponentRef } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
-import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core/components';
 
 export const insertView = (views: RouteView[], view: RouteView, direction: RouterDirection): RouteView[] => {
   if (direction === 'root') {

angular/src/directives/overlays/modal.ts

@@ -11,9 +11,12 @@ import {
   TemplateRef,
 } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
-import { Components } from '@ionic/core';
-export declare interface IonModal extends Components.IonModal {}
+import { IonModal as IonModalCmp } from '@ionic/core/components/ion-modal.js';
+
+export declare interface IonModal extends IonModalCmp {}
 @ProxyCmp({
+  tagName: 'ion-modal',
+  customElement: IonModalCmp,
   inputs: [
     'animated',
     'backdropBreakpoint',

angular/src/directives/overlays/popover.ts

@@ -11,9 +11,12 @@ import {
   TemplateRef,
 } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
-import { Components } from '@ionic/core';
-export declare interface IonPopover extends Components.IonPopover {}
+import { IonPopover as IonPopoverCmp } from '@ionic/core/components/ion-popover.js';
+
+export declare interface IonPopover extends IonPopoverCmp {}
 @ProxyCmp({
+  tagName: 'ion-popover',
+  customElement: IonPopoverCmp,
   inputs: [
     'alignment',
     'animated',