Routing in Angular 4

Create a new folder name it as Routing. 
Add a new type script file . 
Below is the demo of the routing file where all application are defined.

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

import { EmployeeComponent } from '../Component/ Employee.component'

import { ViewEmployee } from '../Component/ ViewEmployee.component'

export const routes: Routes = [  

    { path: '', component: EmployeeComponent },

    { path: ‘/ViewEmployee’, component: / ViewEmployee },

    { path: ' ViewEmployee/:Id/', component: ViewEmployee }

];

export const Routing: ModuleWithProviders = RouterModule.forRoot(routes);

Create a new typescript file name it Test.module.ts module and import above routing in angular 2  Below is the sample code of the module.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from "@angular/forms"

import { routing } from '../Routing/app.routing';

@NgModule({

    imports: [

        BrowserModule,

        BrowserAnimationsModule,

        NgbModule.forRoot(),

        FormsModule,

        HttpModule,

        routing,

        ],

    declarations: [

       

        ],

    bootstrap: [

      

    ],

    entryComponents: [ConfirmationComponent

    ],

    providers: [{ provide: APP_BASE_HREF, useValue: '/' }

    ]

})

export class AppModule {

}

Route Working

1.  When user login it will redirect to the relationship component page by default.
2.    If user click or type Add Learning ,Relate or relationship it will redirect to the add learning/relate or relationship component screen.
3.  Last route is for how to pass query string values or parameters to the component. In the last route we are passing two parameter first is ID and second is title parameters to the relationship component page.