javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(angular,angular-server): angular v14 minimum support (#26822)

Browse Source 
BREAKING CHANGE:

Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).

The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
This commit is contained in:
Sean Perkins
2023-02-22 12:33:49 -05:00
committed by GitHub
parent 3086c5859e
commit 1dee16f3a2
50 changed files with 9867 additions and 72822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
angular/src/providers/angular-delegate.ts
View File

@@ -1,11 +1,12 @@
import {
ApplicationRef,
ComponentFactoryResolver,
NgZone,
ViewContainerRef,
Injectable,
InjectionToken,
Injector,
EnvironmentInjector,
inject,
createComponent,
InjectionToken,
ComponentRef,
} from '@angular/core';
import {
@@ -17,27 +18,24 @@ import {
LIFECYCLE_WILL_UNLOAD,
} from '@ionic/core';
import { EnvironmentInjector } from '../di/r3_injector';
import { NavParams } from '../directives/navigation/nav-params';
import { isComponentFactoryResolver } from '../util/util';
// TODO(FW-2827): types
@Injectable()
export class AngularDelegate {
constructor(private zone: NgZone, private appRef: ApplicationRef) {}
private zone = inject(NgZone);
private applicationRef = inject(ApplicationRef);
create(
resolverOrInjector: ComponentFactoryResolver,
environmentInjector: EnvironmentInjector,
injector: Injector,
location?: ViewContainerRef,
elementReferenceKey?: string
): AngularFrameworkDelegate {
return new AngularFrameworkDelegate(
resolverOrInjector,
environmentInjector,
injector,
location,
this.appRef,
this.applicationRef,
this.zone,
elementReferenceKey
);
@@ -45,14 +43,13 @@ export class AngularDelegate {
}
export class AngularFrameworkDelegate implements FrameworkDelegate {
private elRefMap = new WeakMap<HTMLElement, any>();
private elRefMap = new WeakMap<HTMLElement, ComponentRef<any>>();
private elEventsMap = new WeakMap<HTMLElement, () => void>();
constructor(
private resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
private environmentInjector: EnvironmentInjector,
private injector: Injector,
private location: ViewContainerRef | undefined,
private appRef: ApplicationRef,
private applicationRef: ApplicationRef,
private zone: NgZone,
private elementReferenceKey?: string
) {}
@@ -78,10 +75,9 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
const el = attachView(
this.zone,
this.resolverOrInjector,
this.environmentInjector,
this.injector,
this.location,
this.appRef,
this.applicationRef,
this.elRefMap,
this.elEventsMap,
container,
@@ -115,40 +111,37 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
export const attachView = (
zone: NgZone,
resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
environmentInjector: EnvironmentInjector,
injector: Injector,
location: ViewContainerRef | undefined,
appRef: ApplicationRef,
elRefMap: WeakMap<HTMLElement, any>,
applicationRef: ApplicationRef,
elRefMap: WeakMap<HTMLElement, ComponentRef<any>>,
elEventsMap: WeakMap<HTMLElement, () => void>,
container: any,
component: any,
params: any,
cssClasses: string[] | undefined
): any => {
let componentRef: ComponentRef<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,
});
if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
// Angular 13 and lower
const factory = resolverOrInjector.resolveComponentFactory(component);
componentRef = location
? location.createComponent(factory, location.length, childInjector)
: factory.create(childInjector);
} else if (location) {
// Angular 14
const environmentInjector = resolverOrInjector;
componentRef = location.createComponent(component, {
index: location.indexOf,
injector: childInjector,
environmentInjector,
} as any);
} else {
return null;
}
const componentRef = createComponent<any>(component, {
environmentInjector,
elementInjector: childInjector,
});
const instance = componentRef.instance;
const hostElement = componentRef.location.nativeElement;
@@ -156,17 +149,15 @@ export const attachView = (
Object.assign(instance, params);
}
if (cssClasses) {
for (const clazz of cssClasses) {
hostElement.classList.add(clazz);
for (const cssClass of cssClasses) {
hostElement.classList.add(cssClass);
}
}
const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
container.appendChild(hostElement);
if (!location) {
appRef.attachView(componentRef.hostView);
}
componentRef.changeDetectorRef.reattach();
applicationRef.attachView(componentRef.hostView);
elRefMap.set(hostElement, componentRef);
elEventsMap.set(hostElement, unbindEvents);
return hostElement;

22
angular/src/providers/modal-controller.ts
View File

@@ -1,32 +1,24 @@
import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
import { ModalOptions, modalController } from '@ionic/core';
import { EnvironmentInjector } from '../di/r3_injector';
import { OverlayBaseController } from '../util/overlay';
import { AngularDelegate } from './angular-delegate';
@Injectable()
export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
constructor(
private angularDelegate: AngularDelegate,
private resolver: ComponentFactoryResolver,
private injector: Injector,
// TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
@Optional() private environmentInjector: EnvironmentInjector
) {
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.resolver ?? this.environmentInjector,
this.injector,
undefined,
'modal'
),
delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
});
}
}

7
angular/src/providers/platform.ts
View File

@@ -262,10 +262,11 @@ const readQueryParam = (url: string, key: string) => {
};
const proxyEvent = <T>(emitter: Subject<T>, el: EventTarget, eventName: string) => {
if (el as any) {
el.addEventListener(eventName, (ev: Event | undefined | null) => {
if (el) {
el.addEventListener(eventName, (ev) => {
// ?? cordova might emit "null" events
emitter.next(ev != null ? ((ev as any).detail as T) : undefined);
const value = ev != null ? (ev as any).detail : undefined;
emitter.next(value);
});
}
};

22
angular/src/providers/popover-controller.ts
View File

@@ -1,32 +1,24 @@
import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
import { Injector, Injectable, inject, EnvironmentInjector } from '@angular/core';
import { PopoverOptions, popoverController } from '@ionic/core';
import { EnvironmentInjector } from '../di/r3_injector';
import { OverlayBaseController } from '../util/overlay';
import { AngularDelegate } from './angular-delegate';
@Injectable()
export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
constructor(
private angularDelegate: AngularDelegate,
private resolver: ComponentFactoryResolver,
private injector: Injector,
// TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
@Optional() private environmentInjector: EnvironmentInjector
) {
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.resolver ?? this.environmentInjector,
this.injector,
undefined,
'popover'
),
delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
});
}
}