AppDividend
Latest Code Tutorials

Angular Router Tutorial Example

Angular 4 Router Tutorial

5,598

Angular Router Tutorial Example is today’s main topic. The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. For Single Page Application, Routing is the one and only tool or we can say module to navigate the pages to pages. So, let us get started Angular 4 Router Tutorial or just Angular Router Tutorial.

Angular Router Tutorial

You can find its documentation on this website.

Step 1: Install The Angular Project.

Install Angular CLI globally on your system by typing the following command.

npm install -g @angular/cli

Now, create one project called ngRouter.

ng new ngRouter

Serve the application by the following command.

cd my-app
ng serve --open

Step 2: Make three components for the application.

Create one directory inside src  >>  app folder called components.

Next, make three components by typing the following command.

ng g c home
ng g c about
ng g c dashboard

It creates a separate folder inside src  >>  app directory, we need to move all these three folders inside components folder for better project structure.

Step 3: Routing and Navigation.

Related Posts
1 of 7

The Angular Router enables navigation from one view to the next as users perform application tasks.

First, we need to import the routing modules inside our app.module.ts file.

// app.module.ts

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

imports: [
    BrowserModule, RouterModule
],

Configuration

When you have created the components, it’s by default path is different and now we have moved the components, so now its path is different. So, first, we need to change that path in app.module.ts file.

// app.module.ts

import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Okay, now we need to configure the routes. So make one file inside app directory called routerConfig.ts file.

Write the following code in it.

// routerConfig.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

export const appRoutes: Routes = [
  { path: 'home', 
    component: HomeComponent 
  },
  {
    path: 'about',
    component: AboutComponent
  },
  { path: 'dashboard',
    component: DashboardComponent
  }
];

We have defined one array and inside that array, we have registered the different routes with their components. Finally, we have exported it.

Now, import this object inside app.module.ts and register the module.

// app.module.ts

import { appRoutes } from './routerConfig';

imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
],

Step 4: Define the Router outlet.

In the app.component.html file, write the following code.

<!-- app.component.html  -->

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <nav>
    <a routerLink="home" routerLinkActive="active">Home</a>
    <a routerLink="about">About</a>
    <a routerLink="dashboard">Dashboard</a>
  </nav>
  <router-outlet></router-outlet>
</div>

Now, we have already changed the title inside app.component.ts file.

// app.component.ts

title = 'Angular Router Tutorial';

Start the app by the following command.

ng serve --open

After webpack compiles successfully, we can see the following page at the http://localhost:4200/home

 

Angular 4 Router Tutorial With Example 2017

Our basic Angular Router Tutorial is over. Thanks for the reading.

16 Comments
  1. Katheirne says

    so helpful! thanks for this

    1. Mohamed says

      Thank you

  2. Mohamed says

    Thank you

  3. lisa says

    Thanks for your effort, but export default appRoutes; didn’t work for me I got an error as soon as I ng served the app.

    1. Krunal says

      please use export const. It works fine.

    2. Krunal says

      export const appRoutes: Routes = [
      { path: ‘home’,
      component: HomeComponent
      },
      {
      path: ‘about’,
      component: AboutComponent
      },
      { path: ‘dashboard’,
      component: DashboardComponent
      }
      ];
      Then import like this in app.module.ts file.
      // app.module.ts

      import { appRoutes } from ‘./routerConfig’;

      Restart the server. And error will be gone.

  4. oussama says

    i got these error:
    ERROR in TypeError: Cannot read property ‘loadChildren’ of null

    1. Krunal says

      export const appRoutes: Routes = [
      { path: ‘home’,
      component: HomeComponent
      },
      {
      path: ‘about’,
      component: AboutComponent
      },
      { path: ‘dashboard’,
      component: DashboardComponent
      }
      ];
      Then import like this in app.module.ts file.
      // app.module.ts

      import { appRoutes } from ‘./routerConfig’;

      Restart the server. And error will be gone.

  5. Kishor says

    i got these error:
    ERROR in TypeError: Cannot read property ‘loadChildren’ of null

    1. Krunal says

      I guess you need to export routes like export const routes. This will resolve the issue in the routes file.

  6. Joseph says

    Tks man

  7. MANJUNATH C says

    good and easy to understand tutorial. Thanks.

  8. Sam Doidge says

    Good tutorial. You say to ‘cd my-app’, but for my version (Angular CLI: 1.7.3 / Angular: 5.2.9), the folder name is the project name from the previous command; ‘ng new ngRouter’, so ‘cd ngRouter’ is required.

  9. pramood says

    hi, i got an error => ERROR in Cannot read property ‘loadChildren’ of null

    and i changed from export default appRoutes; to export const routes

    also i’m getting same error

    import { Routes } from ‘@angular/router’;
    import { HomeComponent } from ‘./components/home/home.component’;
    import { AboutComponent } from ‘./components/about/about.component’;
    import { DashboardComponent } from ‘./components/dashboard/dashboard.component’;

    const appRoutes: Routes = [
    { path: ‘home’,
    component: HomeComponent
    },
    {
    path: ‘about’,
    component: AboutComponent
    },
    { path: ‘dashboard’,
    component: DashboardComponent
    }
    ];
    export default appRoutes;

  10. Pietman Heyns says

    I receive the same error ‘ERROR in TypeError: Cannot read property ‘loadChildren’ of null’ even after changing the export type to const, could you please share a link to your code?

    Kind regards,
    Pietman

    1. Krunal says

      export const appRoutes: Routes = [
      { path: ‘home’,
      component: HomeComponent
      },
      {
      path: ‘about’,
      component: AboutComponent
      },
      { path: ‘dashboard’,
      component: DashboardComponent
      }
      ];
      Then import like this in app.module.ts file.
      // app.module.ts

      import { appRoutes } from ‘./routerConfig’;

      Restart the server. And error will be gone.

Leave A Reply

Your email address will not be published.