A routing configuration tells Angular what to do with a browser URL. Each route pairs a path with a component to display, or specifies another navigation outcome. The component selected for the current URL appears at a router-outlet in the template. The HTML document also needs a base element so Angular can apply routes against the application’s base URL. section 6.3.2 section 24.2.6
Listing 24.1. The contents of the app.routing.ts file in the src/app folder
import { Routes, RouterModule } from "@angular/router";
import { tableComponent } from "./core/table.component";
import { FormComponent } from "./core/form.component";
const routes: Routes = [
{ path: "form/edit", component: FormComponent },
{ path: "form/create", component: FormComponent },
{ path: "", component: tableComponent }]
export const routing = RouterModule.forRoot(routes);
Start with a Routes array: form/edit and form/create select FormComponent, while the empty path selects the table. RouterModule.forRoot packages these application-wide routes for import into the root module. section 24.2.1 section 24.2.3
Route order matters. Angular checks paths in sequence and uses the first match, so put more specific routes before less specific ones. If a URL selects an unexpected component, check the order first. A wildcard path, **, can catch other URLs and redirect them—for example, to /store. section 24.2.1 section 6.3.2
Store and checkout routes
Define { path: "store", component: StoreComponent }, { path: "cart", component: CartDetailComponent }, and { path: "checkout", component: CheckoutComponent } in RouterModule.forRoot([...]). Follow them with { path: "**", redirectTo: "/store" }, then place <router-outlet></router-outlet> in the root component template. Visiting an unmatched URL now selects the store route instead. section 6.3.2
A feature module defines its own routes with RouterModule.forChild rather than forRoot. Routes can also have children displayed in a nested router-outlet, parameters such as :id, and guards controlling activation or deactivation. For an on-demand feature, define its routes inside the feature module and add a loadChildren route to the main configuration; the feature routes join the routing system when the module loads. section 7.1.1 section 7.5.2 section 26.2 section 27.3.2
Use routerLink for navigation within the running application. Typing a route URL directly into the address bar instead makes the browser request that URL from the server and reload the application; only after loading does Angular inspect the URL and select its component. section 24.2.6
