Angular Route Configuration

Angular Routes is an array of route configurations. Each Angular route, has the following properties:

path is a string that uses the route matcher DSL.
pathMatch is a string that specifies the matching strategy.
matcher defines a custom strategy for path matching and supersedes path and pathMatch.
component is a component type.
redirectTo is the url fragment which will replace the current matched segment.
outlet is the name of the outlet the component should be placed into.
canActivate is an array of DI tokens used to look up CanActivate handlers.
canActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
canDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
canLoad is an array of DI tokens used to look up CanLoad handlers.
data is additional data provided to the component via ActivatedRoute.
resolve is a map of DI tokens used to look up data resolvers.
runGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.
children is an array of child route definitions.
loadChildren is a reference to lazy loaded child routes.

A routed Angular application has one singleton instance of the Router service. When the browser’s URL changes, that router looks for a corresponding Route from which it can determine the component to display.

A router has no routes until you configure it. The following example creates four route definitions, configures the router via the RouterModule.forRoot method, and adds the result to the AppModule’s imports array.

src/app/app.module.ts (excerpt)

const appRoutes: Routes = [

{ path: ‘crisis-center’, component: CrisisListComponent },

{ path: ‘hero/:id’,component: HeroDetailComponent },

{

path: ‘heroes’,

component: HeroListComponent,

data: { title: ‘Heroes List’ }

{ path: ”,

redirectTo: ‘/heroes’,

pathMatch: ‘full’

{ path: ‘**’, component: PageNotFoundComponent }