From ecc9dd6e4fc800612b5214ea002dfd0f2627f79d Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 21 Jun 2022 16:16:59 -0400 Subject: [PATCH 1/4] fix(angular): warn devs that standalone components are not supported --- angular/src/directives/navigation/ion-router-outlet.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts index 76b2bf28bec..7e73e77d742 100644 --- a/angular/src/directives/navigation/ion-router-outlet.ts +++ b/angular/src/directives/navigation/ion-router-outlet.ts @@ -233,6 +233,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit { this.updateActivatedRouteProxy(cmpRef.instance, activatedRoute); } else { const snapshot = (activatedRoute as any)._futureSnapshot; + + if (snapshot.component) { + throw new Error(`[Ionic Error] Standalone components are not currently supported with ion-router-outlet. + You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404`); + } + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const component = snapshot.routeConfig!.component as any; const childContexts = this.parentContexts.getOrCreateContext(this.name).children; From 0ebb639192aa61e74d59983c47886027407fd21f Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 21 Jun 2022 16:58:46 -0400 Subject: [PATCH 2/4] chore(): adjust messaging and formatting --- angular/src/directives/navigation/ion-router-outlet.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts index 7e73e77d742..559097f329e 100644 --- a/angular/src/directives/navigation/ion-router-outlet.ts +++ b/angular/src/directives/navigation/ion-router-outlet.ts @@ -235,8 +235,9 @@ export class IonRouterOutlet implements OnDestroy, OnInit { const snapshot = (activatedRoute as any)._futureSnapshot; if (snapshot.component) { - throw new Error(`[Ionic Error] Standalone components are not currently supported with ion-router-outlet. - You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404`); + throw new Error( + 'Standalone components are not currently supported with ion-router-outlet. You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404' + ); } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion From 3968d31a57536155865c0502f33f84c7f00e1899 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 21 Jun 2022 22:11:39 -0400 Subject: [PATCH 3/4] chore(): rework warning and document purpose --- .../src/directives/navigation/ion-router-outlet.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts index 559097f329e..ab37ac2996a 100644 --- a/angular/src/directives/navigation/ion-router-outlet.ts +++ b/angular/src/directives/navigation/ion-router-outlet.ts @@ -234,10 +234,19 @@ export class IonRouterOutlet implements OnDestroy, OnInit { } else { const snapshot = (activatedRoute as any)._futureSnapshot; + /** + * Angular 14 introduces a new `loadComponent` property to the route config, + * that assigns the component to load to the `component` property of + * the route snapshot. We can check for the presence of this property + * to determine if the route is using standalone components. + * + * TODO: FW-1631: Remove this check when supporting standalone components + */ if (snapshot.component) { - throw new Error( - 'Standalone components are not currently supported with ion-router-outlet. You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404' + console.warn( + '[Ionic Warning]: Standalone components are not currently supported with ion-router-outlet. You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404' ); + return; } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion From 41f5b466594968e9bfa335e1498601c909122efd Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 23 Jun 2022 12:26:43 -0400 Subject: [PATCH 4/4] refactor(): check if component is not set --- angular/src/directives/navigation/ion-router-outlet.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts index ab37ac2996a..59927aa9409 100644 --- a/angular/src/directives/navigation/ion-router-outlet.ts +++ b/angular/src/directives/navigation/ion-router-outlet.ts @@ -234,6 +234,9 @@ export class IonRouterOutlet implements OnDestroy, OnInit { } else { const snapshot = (activatedRoute as any)._futureSnapshot; + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const component = snapshot.routeConfig!.component as any; + /** * Angular 14 introduces a new `loadComponent` property to the route config, * that assigns the component to load to the `component` property of @@ -242,15 +245,13 @@ export class IonRouterOutlet implements OnDestroy, OnInit { * * TODO: FW-1631: Remove this check when supporting standalone components */ - if (snapshot.component) { + if (component == null && snapshot.component) { console.warn( '[Ionic Warning]: Standalone components are not currently supported with ion-router-outlet. You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404' ); return; } - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const component = snapshot.routeConfig!.component as any; const childContexts = this.parentContexts.getOrCreateContext(this.name).children; // We create an activated route proxy object that will maintain future updates for this component