diff --git a/aio/content/examples/router-tutorial/src/app/app.component.ts b/aio/content/examples/router-tutorial/src/app/app.component.ts
index db6605650cd..9b4935f1e48 100644
--- a/aio/content/examples/router-tutorial/src/app/app.component.ts
+++ b/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']
})
diff --git a/aio/content/examples/router-tutorial/src/app/app.config.ts b/aio/content/examples/router-tutorial/src/app/app.config.ts
new file mode 100644
index 00000000000..30e834cd354
--- /dev/null
+++ b/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()]
+};
diff --git a/aio/content/examples/router-tutorial/src/app/app.module.ts b/aio/content/examples/router-tutorial/src/app/app.module.ts
deleted file mode 100644
index 519b7f173de..00000000000
--- a/aio/content/examples/router-tutorial/src/app/app.module.ts
+++ /dev/null
@@ -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 { }
diff --git a/aio/content/examples/router-tutorial/src/app/app.routes.ts b/aio/content/examples/router-tutorial/src/app/app.routes.ts
new file mode 100644
index 00000000000..cc9a18eb14d
--- /dev/null
+++ b/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}
+];
diff --git a/aio/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts b/aio/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts
index 24ccdace70d..72ca57c7b08 100644
--- a/aio/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts
+++ b/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']
})
diff --git a/aio/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts b/aio/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts
index d526b189bfa..73677d8c675 100644
--- a/aio/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts
+++ b/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']
})
diff --git a/aio/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts b/aio/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts
index 3f5686d0968..862bc3b7c65 100644
--- a/aio/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts
+++ b/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 {
-
}
diff --git a/aio/content/examples/router-tutorial/src/main.ts b/aio/content/examples/router-tutorial/src/main.ts
index 0a621147e30..92e4bd8713b 100644
--- a/aio/content/examples/router-tutorial/src/main.ts
+++ b/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);
diff --git a/aio/content/guide/router-tutorial.md b/aio/content/guide/router-tutorial.md
index 65ff59f54d9..3ef7e3d2a3d 100644
--- a/aio/content/guide/router-tutorial.md
+++ b/aio/content/guide/router-tutorial.md
@@ -43,7 +43,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
- ng new angular-router-sample
+ ng new angular-router-sample --standalone
@@ -58,7 +58,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
- ng generate component crisis-list
+ ng generate component crisis-list --standalone
@@ -70,7 +70,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
- ng generate component heroes-list
+ ng generate component heroes-list --standalone
@@ -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.
-
-
-
## 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:
-
+```
+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
+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.
@@ -199,6 +224,7 @@ Add this functionality using Angular's `routerLinkActive` directive.
1. Update the anchor tags to include the `routerLinkActive` directive.
+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.
-
+```
+ {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
- ng generate component page-not-found
+ ng generate component page-not-found --standalone
@@ -243,10 +271,11 @@ In this section, you'll create a 404 page and update your route configuration to
-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:
-
+```
+ {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
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