docs(router): Update the basic router guide to use standalone (#51452)

This commit updates the basic router-tutorial guide to use standalone features.

PR Close #51452

aio/content/examples/router-tutorial/src/app/app.component.ts

@@ -1,7 +1,13 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
+
+import {CrisisListComponent} from './crisis-list/crisis-list.component';
+import {HeroesListComponent} from './heroes-list/heroes-list.component';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, CrisisListComponent, HeroesListComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })

aio/content/examples/router-tutorial/src/app/app.config.ts

@@ -0,0 +1,10 @@
+import {ApplicationConfig} from '@angular/core';
+import {provideProtractorTestingSupport} from '@angular/platform-browser';
+import {provideRouter} from '@angular/router';
+
+import {routes} from './app.routes';
+
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes), provideProtractorTestingSupport()]
+};

aio/content/examples/router-tutorial/src/app/app.module.ts

@@ -1,38 +0,0 @@
-// #docplaster
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-// #docregion router-import
-import { RouterModule } from '@angular/router';
-// #enddocregion router-import
-import { AppComponent } from './app.component';
-import { CrisisListComponent } from './crisis-list/crisis-list.component';
-import { HeroesListComponent } from './heroes-list/heroes-list.component';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    CrisisListComponent,
-    HeroesListComponent,
-    PageNotFoundComponent
-  ],
-  // #docplaster
-  // #docregion import-basic, import-redirect, import-wildcard
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot([
-      {path: 'crisis-list', component: CrisisListComponent},
-      {path: 'heroes-list', component: HeroesListComponent},
-  // #enddocregion import-basic
-      {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
-  // #enddocregion import-redirect
-      {path: '**', component: PageNotFoundComponent}
-  // #enddocregion import-wildcard
-  // #docregion import-basic, import-redirect, import-wildcard
-    ]),
-  ],
-  // #enddocregion import-basic, import-redirect, import-wildcard
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

aio/content/examples/router-tutorial/src/app/app.routes.ts

@@ -0,0 +1,12 @@
+import {Routes} from '@angular/router';
+
+import {CrisisListComponent} from './crisis-list/crisis-list.component';
+import {HeroesListComponent} from './heroes-list/heroes-list.component';
+import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
+
+export const routes: Routes = [
+  {path: 'crisis-list', component: CrisisListComponent},
+  {path: 'heroes-list', component: HeroesListComponent},
+  {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
+  {path: '**', component: PageNotFoundComponent}
+];

aio/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-crisis-list',
+  standalone: true,
   templateUrl: './crisis-list.component.html',
   styleUrls: ['./crisis-list.component.css']
 })

aio/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-heroes-list',
+  standalone: true,
   templateUrl: './heroes-list.component.html',
   styleUrls: ['./heroes-list.component.css']
 })

aio/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts

@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-page-not-found',
+  standalone: true,
   templateUrl: './page-not-found.component.html',
   styleUrls: ['./page-not-found.component.css']
 })
 export class PageNotFoundComponent {
-
 }

aio/content/examples/router-tutorial/src/main.ts

@@ -1,6 +1,6 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {bootstrapApplication} from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
+import {AppComponent} from './app/app.component';
+import {appConfig} from './app/app.config';
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig);

aio/content/guide/router-tutorial.md

@@ -43,7 +43,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
 
     <code-example format="shell" language="shell">
 
-    ng new angular-router-sample
+    ng new angular-router-sample --standalone
 
     </code-example>
 
@@ -58,7 +58,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
 
     <code-example format="shell" language="shell">
 
-    ng generate component crisis-list
+    ng generate component crisis-list --standalone
 
     </code-example>
 
@@ -70,7 +70,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
 
     <code-example format="shell" language="shell">
 
-    ng generate component heroes-list
+    ng generate component heroes-list --standalone
 
     </code-example>
 
@@ -94,17 +94,6 @@ This application will have two components: *crisis-list* and *heroes-list*.
 
     You should see a single web page, consisting of a title and the HTML of your two components.
 
-## Import `RouterModule` from `@angular/router`
-
-Routing lets you display specific views of your application depending on the URL path.
-To add this functionality to your sample application, you need to update the `app.module.ts` file to use the module, `RouterModule`.
-You import this module from `@angular/router`.
-
-1.  From your code editor, open the `app.module.ts` file.
-1.  Add the following `import` statement.
-
-    <code-example header="src/app/app.module.ts" path="router-tutorial/src/app/app.module.ts" region="router-import"></code-example>
-
 ## Define your routes
 
 In this section, you'll define two routes:
@@ -117,17 +106,45 @@ Each route typically has two properties.
 The first property, `path`, is a string that specifies the URL path for the route.
 The second property, `component`, is a string that specifies what component your application should display for that path.
 
-1.  From your code editor, open the `app.module.ts` file.
-1.  Locate the `@NgModule()` section.
-1.  Replace the `imports` array in that section with the following.
+1. From your code editor, create and open the `app.routes.ts` file.
+1. Create and export a routes list for your application:
 
-    <code-example header="src/app/app.module.ts" path="router-tutorial/src/app/app.module.ts" region="import-basic"></code-example>
+```
+import {Routes} from '@angular/router';
+
+export const routes = [];
+```
+1. Add two routes for your first two components:
+
+```
+  {path: 'crisis-list', component: CrisisListComponent},
+  {path: 'heroes-list', component: HeroesListComponent},
+```
+
+This routes list is an array of JavaScript objects, with each object defining the properties of a route.
+
+## Import `provideRouter` from `@angular/router`
+
+Routing lets you display specific views of your application depending on the URL path.
+To add this functionality to your sample application, you need to update the `app.config.ts` file to use the router providers function, `provideRouter`.
+You import this provider function from `@angular/router`.
+
+1.  From your code editor, open the `app.config.ts` file.
+1.  Add the following import statements: 
+
+```
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+```
+
+2. Update the providers in the `appConfig`:
+
+```
+providers: [provideRouter(routes)]
+```
+
+For `NgModule` based applications, put the `provideRouter` in the `providers` list of the `AppModule`, or whichever module is passed to `bootstrapModule` in the application.
 
-This code adds the `RouterModule` to the `imports` array.
-Next, the code uses the `forRoot()` method of the `RouterModule` to define your two routes.
-This method takes an array of JavaScript objects, with each object defining the properties of a route.
-The `forRoot()` method ensures that your application only instantiates one `RouterModule`.
-For more information, see [Singleton Services](guide/singleton-services#forroot-and-the-router).
 
 ## Update your component with `router-outlet`
 
@@ -146,6 +163,12 @@ To implement this functionality, you add the `router-outlet` directive to your t
 
     <code-example header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" region="router-outlet"></code-example>
 
+1. Add `RouterOutlet` to the imports of the `AppComponent` in `app.component.ts`
+
+```
+imports: [RouterOutlet],
+```
+
 View your updated application in your browser.
 You should see only the application title.
 To view the `crisis-list` component, add `crisis-list` to the end of the path in your browser's address bar.
@@ -183,6 +206,8 @@ You'll add that functionality in the next section.
     This HTML uses an Angular directive, `routerLink`.
     This directive connects the routes you defined to your template files.
 
+1. Add the `RouterLink` directive to the imports list of `AppComponent` in `app.component.ts`.
+
 1.  Open the `app.component.css` file and add the following styles.
 
     <code-example header="src/app/app.component.css" path="router-tutorial/src/app/app.component.css"></code-example>
@@ -199,6 +224,7 @@ Add this functionality using Angular's `routerLinkActive` directive.
 1.  Update the anchor tags to include the `routerLinkActive` directive.
 
     <code-example header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" region="routeractivelink"></code-example>
+1. Add the `RouterLinkActive` directive to the `imports` list of `AppComponent` in `app.component.ts`.
 
 View your application again.
 As you click one of the buttons, the style for that button updates automatically, identifying the active component to the user.
@@ -210,10 +236,12 @@ Note that we are also specifying a value for the `routerLinkActive`'s `ariaCurre
 
 In this step of the tutorial, you add a route that redirects the user to display the `/heroes-list` component.
 
-1.  From your code editor, open the `app.module.ts` file.
-1.  In the `imports` array, update the `RouterModule` section as follows.
+1.  From your code editor, open the `app.routes.ts` file.
+1.  Update the `routes` section as follows.
 
-    <code-example header="src/app/app.module.ts" path="router-tutorial/src/app/app.module.ts" region="import-redirect"></code-example>
+```
+  {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
+```
 
     Notice that this new route uses an empty string as its path.
     In addition, it replaces the `component` property with two new ones:
@@ -235,7 +263,7 @@ In this section, you'll create a 404 page and update your route configuration to
 
     <code-example format="shell" language="shell">
 
-    ng generate component page-not-found
+    ng generate component page-not-found --standalone
 
     </code-example>
 
@@ -243,10 +271,11 @@ In this section, you'll create a 404 page and update your route configuration to
 
     <code-example header="src/app/page-not-found/page-not-found.component.html" path="router-tutorial/src/app/page-not-found/page-not-found.component.html"></code-example>
 
-1.  Open the `app.module.ts` file.
-    In the `imports` array, update the `RouterModule` section as follows.
+1.  Open the `app.routes.ts` file and add the following route to the routes list:
 
-    <code-example header="src/app/app.module.ts" path="router-tutorial/src/app/app.module.ts" region="import-wildcard"></code-example>
+```
+  {path: '**', component: PageNotFoundComponent}
+```
 
     The new route uses a path, `**`.
     This path is how Angular identifies a wildcard route.
@@ -260,7 +289,7 @@ In this section, you'll create a 404 page and update your route configuration to
     </div>
 
 Try navigating to a non-existing route on your application, such as `http://localhost:4200/powers`.
-This route doesn't match anything defined in your `app.module.ts` file.
+This route doesn't match anything defined in your `app.routes.ts` file.
 However, because you defined a wildcard route, the application automatically displays your `PageNotFound` component.
 
 ## Next steps