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 c7affdfbc9)

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 {}

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));

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) {}

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));

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 {}

packages/router/src/router_state.ts

@@ -115,7 +115,7 @@ export function createEmptyStateSnapshot(rootComponent: Type<any> | 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)
  *

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.
  *
- * <code-example path="service-worker/push/module.ts" region="inject-sw-push"
+ * <code-example path="service-worker/push/service_worker_component.ts" region="inject-sw-push"
  * header="app.component.ts"></code-example>
  *
  * 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.
  *
- * <code-example path="service-worker/push/module.ts" region="subscribe-to-push"
+ * <code-example path="service-worker/push/service_worker_component.ts" region="subscribe-to-push"
  * header="app.component.ts"></code-example>
  *
  * 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:
  *
- * <code-example path="service-worker/push/module.ts" region="subscribe-to-notification-clicks"
+ * <code-example path="service-worker/push/service_worker_component.ts" region="subscribe-to-notification-clicks"
  * header="app.component.ts"></code-example>
  *
  * You can read more on handling notification clicks in the [Service worker notifications