From 35dc3ecfdaebbcd0e8ab4ae92da1a1c820aa09f9 Mon Sep 17 00:00:00 2001 From: Shuaib Hasan Akib Date: Thu, 2 Oct 2025 09:00:46 +0600 Subject: [PATCH] refactor(common): update examples to align with Angular best practices Updated examples to use the standalone component approach and the latest (cherry picked from commit c7affdfbc92c434af10fec6f0c89f30671e0d8b9) --- .../{module.ts => activated_route_component.ts} | 13 ++----------- packages/examples/router/activated-route/main.ts | 11 ++++++++--- .../examples/router/route_functional_guards.ts | 5 ----- packages/examples/service-worker/push/main.ts | 15 ++++++++++++--- .../{module.ts => service_worker_component.ts} | 13 ++----------- packages/router/src/router_state.ts | 2 +- packages/service-worker/src/push.ts | 6 +++--- 7 files changed, 28 insertions(+), 37 deletions(-) rename packages/examples/router/activated-route/{module.ts => activated_route_component.ts} (71%) rename packages/examples/service-worker/push/{module.ts => service_worker_component.ts} (78%) diff --git a/packages/examples/router/activated-route/module.ts b/packages/examples/router/activated-route/activated_route_component.ts similarity index 71% rename from packages/examples/router/activated-route/module.ts rename to packages/examples/router/activated-route/activated_route_component.ts index caeb558af8b..a9c6d783ac1 100644 --- a/packages/examples/router/activated-route/module.ts +++ b/packages/examples/router/activated-route/activated_route_component.ts @@ -6,11 +6,10 @@ * found in the LICENSE file at https://angular.dev/license */ // #docregion activated-route -import {Component, NgModule} from '@angular/core'; +import {Component} from '@angular/core'; // #enddocregion activated-route -import {BrowserModule} from '@angular/platform-browser'; // #docregion activated-route -import {ActivatedRoute, RouterModule} from '@angular/router'; +import {ActivatedRoute} from '@angular/router'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; // #enddocregion activated-route @@ -21,7 +20,6 @@ import {map} from 'rxjs/operators'; // #enddocregion activated-route selector: 'example-app', template: '...', - standalone: false, // #docregion activated-route }) export class ActivatedRouteComponent { @@ -33,10 +31,3 @@ export class ActivatedRouteComponent { } } // #enddocregion activated-route - -@NgModule({ - imports: [BrowserModule, RouterModule.forRoot([])], - declarations: [ActivatedRouteComponent], - bootstrap: [ActivatedRouteComponent], -}) -export class AppModule {} diff --git a/packages/examples/router/activated-route/main.ts b/packages/examples/router/activated-route/main.ts index 58cab6249f3..0159afe1688 100644 --- a/packages/examples/router/activated-route/main.ts +++ b/packages/examples/router/activated-route/main.ts @@ -8,8 +8,13 @@ import 'zone.js'; -import {platformBrowser} from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; +import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core'; +import {provideRouter} from '@angular/router'; +import {ActivatedRouteComponent} from './activated_route_component'; -import {AppModule} from './module'; +const appConfig: ApplicationConfig = { + providers: [provideRouter([]), provideZoneChangeDetection(), provideProtractorTestingSupport()], +}; -platformBrowser().bootstrapModule(AppModule); +bootstrapApplication(ActivatedRouteComponent, appConfig).catch((err) => console.error(err)); diff --git a/packages/examples/router/route_functional_guards.ts b/packages/examples/router/route_functional_guards.ts index a4adad0f686..333fbd04e27 100644 --- a/packages/examples/router/route_functional_guards.ts +++ b/packages/examples/router/route_functional_guards.ts @@ -13,7 +13,6 @@ import { ActivatedRouteSnapshot, CanActivateChildFn, CanActivateFn, - CanDeactivateFn, CanMatchFn, provideRouter, ResolveFn, @@ -24,13 +23,11 @@ import { @Component({ template: '', - standalone: false, }) export class App {} @Component({ template: '', - standalone: false, }) export class TeamComponent {} @@ -95,7 +92,6 @@ bootstrapApplication(App, { // #docregion CanDeactivateFn @Component({ template: '', - standalone: false, }) export class UserComponent { hasUnsavedChanges = true; @@ -135,7 +131,6 @@ bootstrapApplication(App, { // #docregion ResolveDataUse @Component({ template: '', - standalone: false, }) export class HeroDetailComponent { constructor(private activatedRoute: ActivatedRoute) {} diff --git a/packages/examples/service-worker/push/main.ts b/packages/examples/service-worker/push/main.ts index 58cab6249f3..ffaabddfd78 100644 --- a/packages/examples/service-worker/push/main.ts +++ b/packages/examples/service-worker/push/main.ts @@ -8,8 +8,17 @@ import 'zone.js'; -import {platformBrowser} from '@angular/platform-browser'; +import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser'; +import {AppComponent} from './service_worker_component'; +import {ApplicationConfig, importProvidersFrom, provideZoneChangeDetection} from '@angular/core'; +import {ServiceWorkerModule} from '@angular/service-worker'; -import {AppModule} from './module'; +const appConfig: ApplicationConfig = { + providers: [ + provideZoneChangeDetection(), + provideProtractorTestingSupport(), + importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js')), + ], +}; -platformBrowser().bootstrapModule(AppModule); +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/packages/examples/service-worker/push/module.ts b/packages/examples/service-worker/push/service_worker_component.ts similarity index 78% rename from packages/examples/service-worker/push/module.ts rename to packages/examples/service-worker/push/service_worker_component.ts index 0eb9e59466b..65f93ecc056 100644 --- a/packages/examples/service-worker/push/module.ts +++ b/packages/examples/service-worker/push/service_worker_component.ts @@ -6,9 +6,8 @@ * found in the LICENSE file at https://angular.dev/license */ // tslint:disable: no-duplicate-imports -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {ServiceWorkerModule} from '@angular/service-worker'; +import {Component} from '@angular/core'; + // #docregion inject-sw-push import {SwPush} from '@angular/service-worker'; // #enddocregion inject-sw-push @@ -19,7 +18,6 @@ const PUBLIC_VAPID_KEY_OF_SERVER = '...'; @Component({ selector: 'example-app', template: 'SW enabled: {{ swPush.isEnabled }}', - standalone: false, }) // #docregion inject-sw-push export class AppComponent { @@ -49,10 +47,3 @@ export class AppComponent { // #docregion inject-sw-push } // #enddocregion inject-sw-push - -@NgModule({ - bootstrap: [AppComponent], - declarations: [AppComponent], - imports: [BrowserModule, ServiceWorkerModule.register('ngsw-worker.js')], -}) -export class AppModule {} diff --git a/packages/router/src/router_state.ts b/packages/router/src/router_state.ts index 9a87729e924..403e5dac8bd 100644 --- a/packages/router/src/router_state.ts +++ b/packages/router/src/router_state.ts @@ -115,7 +115,7 @@ export function createEmptyStateSnapshot(rootComponent: Type | null): Route * on shallow equality. For example, changing deeply nested properties in resolved `data` will not * cause the `ActivatedRoute.data` `Observable` to emit a new value. * - * {@example router/activated-route/module.ts region="activated-route"} + * {@example router/activated-route/activated_route_component.ts region="activated-route"} * * @see [Getting route information](guide/routing/common-router-tasks#getting-route-information) * diff --git a/packages/service-worker/src/push.ts b/packages/service-worker/src/push.ts index c5495024f18..43d594463d2 100644 --- a/packages/service-worker/src/push.ts +++ b/packages/service-worker/src/push.ts @@ -24,7 +24,7 @@ import {ERR_SW_NOT_SUPPORTED, NgswCommChannel, PushEvent} from './low_level'; * You can inject a `SwPush` instance into any component or service * as a dependency. * - * * * To subscribe, call `SwPush.requestSubscription()`, which asks the user for permission. @@ -32,7 +32,7 @@ import {ERR_SW_NOT_SUPPORTED, NgswCommChannel, PushEvent} from './low_level'; * [`PushSubscription`](https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription) * instance. * - * * * A request is rejected if the user denies permission, or if the browser @@ -78,7 +78,7 @@ import {ERR_SW_NOT_SUPPORTED, NgswCommChannel, PushEvent} from './low_level'; * An application can subscribe to `SwPush.notificationClicks` observable to be notified when a user * clicks on a notification. For example: * - * * * You can read more on handling notification clicks in the [Service worker notifications