From 3dc74f3ac5ca0502ad13641effcede08dcfabbf7 Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Mon, 21 Aug 2023 15:17:19 -0700 Subject: [PATCH] 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 --- .../router-tutorial/src/app/app.component.ts | 8 +- .../router-tutorial/src/app/app.config.ts | 10 ++ .../router-tutorial/src/app/app.module.ts | 38 -------- .../router-tutorial/src/app/app.routes.ts | 12 +++ .../app/crisis-list/crisis-list.component.ts | 1 + .../app/heroes-list/heroes-list.component.ts | 1 + .../page-not-found.component.ts | 4 +- .../examples/router-tutorial/src/main.ts | 8 +- aio/content/guide/router-tutorial.md | 91 ++++++++++++------- 9 files changed, 97 insertions(+), 76 deletions(-) create mode 100644 aio/content/examples/router-tutorial/src/app/app.config.ts delete mode 100644 aio/content/examples/router-tutorial/src/app/app.module.ts create mode 100644 aio/content/examples/router-tutorial/src/app/app.routes.ts 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