Angular 5 Route



Now in this part we will be discussing about Angular 5 Route:

  • Create a component say “contact”
    • $ ng g c contact
  • Add the component to /src/app/app-routing.module.ts:
    • import { NgModule } from ‘@angular/core’;
      import { NgModule } from ‘@angular/core’;
      import { Routes, RouterModule } from ‘@angular/router’;import { HomeComponent } from ‘./home/home.component’;
      import { ContactComponent } from ‘./contact/contact.component’;

      const routes: Routes = [
          component: HomeComponent
          component: ContactComponent
      { imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]}
      export class AppRoutingModule { }


  • Add an anchor tag in /src/app/home/home.component.html
    • <a routerLink=”contact”>Contact</a>
    • Here the routeLink helps to set the route to find the page with routing
  • Run the application using
    • $ ng serve
  • When the app starts browse on the browser click the “contact” anchor and the page will route to Contact page.


We will see the next thing about Angular 5 its service creation and use. Click Here

3 thoughts on “Angular 5 Route

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.