What is Routes and Route Properties?

Angular Route is an array of route configurations. The “RouterModule.forRoot” method in the module imports to configure the router.

type Routes = Route[];

Each Route has the following properties -
interface Route {
  path?: string
  pathMatch?: string
  matcher?: UrlMatcher
  component?: Type<any>
  redirectTo?: string
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers

List of properties and it has the following order -
1.      path - It uses the route matcher DSL
2.      pathMatch - It uses to specifies the matching strategy
3.      matcher - It uses to defines a custom strategy for path matching
4.      component - It is a component type
5.      redirectTo - It is the URL fragment and it will replace the current matched segment
6.      outlet - It is the name of the outlet the component should be placed into
7.      canActivate  - It is an array of DI tokens  and used to handle the CanActivate handlers
8.      canActivateChild - It is an array of DI tokens and used to handle the CanActivateChild handlers
9.      canDeactivate - It is an array of DI tokens and used to handle the CanDeactivate handlers
10.  canLoad - It is an array of DI tokens and used to handle the CanLoad handlers
11.  data - It is additional data provided to the component by using the ActivatedRoute
12.  resolve - It is a map of DI tokens used to look up data resolvers
13.  runGuardsAndResolvers - It is defined when guards and resolvers will be run and by default, they run only when the matrix parameters of the route change.
14.  children - it is an array of child route definitions
15.  loadChildren - It is a reference to lazily loaded child routes.

The following example help you to understand the Router, Router module, and Routes -
In this example, the array of appRoots describes how to navigate from one view to other views and pass it into RouterModule.forRoot method to configure the router.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RoutesRouterModule,}  from '@angular/router';

//Import Components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserComponent } from './user/user.component';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'

//Apps roots
const appRoots = [
  path: ''redirectTo: '/dashboard'pathMatch: 'full' },
  path: 'user/:id'component: UserDetailComponent }, //Id is a Roots parameter.
  path: 'users'component: UserComponentdata:title:'User List'} },
  path: '**'redirectTo: 'PageNotFoundComponent' } //Wild Cards (**), the router will instantiate the PageNotFound component

//AppModule class with @NgModule decorator
  //Static, this is the compiler configuration
  //declarations is used for configure the selectors
  declarations: [
  //Composability and Grouping
  //imports used for composing NgModules together
  imports: [
    //enableTracing is used for debugging purposes only
    RouterModule.forRoot(appRoots, { enableTracing: true })
  //Runtime or injector configuration
  //providers is used for runtime injector configuration
  providers: [],
  //bootstrapped entry component
  bootstrap: [AppComponent]
export class AppModule { }


Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - and
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide. Powered by Blogger.