Advanced Routing In Angular

Advanced Routing in Angular

1. Creating Angular project with Routing

ng new <PROJECT_NAME> --routing --spec=false

1. The Above Command create's a project with routing file. 
2. The above Command create's default file's as below: 
   a. app.component.html
   b. app.component.ts
   c. app.component.css
   d. app.component.module.ts
   e. app.routing.module.ts

2. Creating 3 component's  

ng generate component list --spec=false
ng generate component template-forms --spec=false
ng g c pageNotFound --spec=false (short hand command)

Above command's create 3 components with following file's 
 <COMPONENT_NAME>.component.html
 <COMPONENT_NAME>.component.ts
 <COMPONENT_NAME>.component.css 

3. Creating 3 Module's for each component

ng generate module list --routing --spec=false
ng generate module template-forms --routing --spec=false
ng g m pageNotFound --routing --spec=false

Above command's create 2 more file's in each component level
<COMPONENT_NAME>.module.ts
<COMPONENT_NAME-routing>.module.ts

Now each component will have following file's
<COMPONENT_NAME>.component.html
<COMPONENT_NAME>.component.css
<COMPONENT_NAME>.component.ts
<COMPONENT_NAME>.module.ts
<COMPONENT_NAME-routing>.module.ts

4. To Create Child Route's let us create a child component for all the above generated component's

ng g c admin --spec=false

The above component become's child for app and parent for all
the remaining Component's.

5. Each Component look's like 

In list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListRoutingModule } from './list-routing.module';
import {ListComponent} from './list.component';
@NgModule({
  imports: [
    CommonModule,
    ListRoutingModule
  ],
  declarations: [ListComponent]
})
export class ListModule { }

In list-routing.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ListRoutingModule { }

In list.component.html

<p>
  list works!
</p>

In list.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

NOTE: Same as above each component will be imported in there 
       respective module's and will not be imported in 
       app.module.ts 

6. Now app component will be as follow's

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AppRoutingModule} from './app.roting.module';
import { AppComponent } from './app.component';
import { AdminComponent } from './admin/admin.component';

@NgModule({
  declarations: [
    AppComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
const routes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '',
        component: AdminComponent,
        children: [
            {
                path: 'login',
                loadChildren: 
'./template-forms/template-forms.module#TemplateFormsModule'
            },
            {
                path: 'list',
                loadChildren: 
'./list/list.module#ListModule'
            },
            {
                path: '404',
                loadChildren: 
'./page-not-found/page-not-found.module#PageNotFoundModule'
            },
        ]
    },
    {
        path: '**',
        redirectTo: '/404',
        pathMatch: 'full'
    },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

app.component.html

<router-outlet></router-outlet>

7. Admin component which is child of all the child route's look as below

admin.component.html

<router-outlet></router-outlet>

admin.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

8. How this routing works

1. When app is launched compiler search for the app routes 
  and then search for default { path: '' }; and redirect's to the 
  path linked for default path 
  (Example : it navigate's to login page here ) 
2. Here Login is a child path and will load the particular 
   module related to the path mentioned in loadChildren property 
   (i.e.. Login Module)
3. It internally move's into the module and search for
   child route's (ie.. Login Route's).
4. In Child Route's 
   (It search for default route of child and display the 
   particular component html) which is mentioned in component property
5. Now this HTML content will be displayed in the parent 
   <router-outlet> (i.e.. Admin Component) which 
   internally display the content in app.component.html
   <router-outlet> (i.e.. App component HTML) which internally display's 
   the content in index.html using APP COMPONENT selector.
6. <router-outlet> is an angular DOM element, which replace's
   the selector of the component based on the route and 
   display's the content of the component without reload.
7. In same way when user enter's wrong URL then it will 
   navigate to { path: '**' } and redirect's to the path mentioned 
  redirectTo property (ie.. PageNotFoundComponent).
8. Routes is a type for angular which allow's Array Of route Objects

Important Note 

Alway's use default path on the top of routing and Page Not Found 
path at bottom of routing array.

Reason : Because alway's route's are searched from top and if it found's 
   the pageNotFound path prior to other path's compiler will not execute 
   the remaining path's and alway's execute page not found Component  

Advantage of Advance Routing

1. Increase performance of the application as all the component's 
   won't load at a time. 
2. Component's will be loaded only when the user navigates to a particular path.