Video Course

Routing Angular v2+ Applications: Lesson 3 of 23

Starting Routing

Up Next

Router Links

Autoplaying in 7 seconds!


Create a Free Account to Watch

Sign Up Now

Login to your account

The router requires a <base href="/"> to be set in the index.html <head> section.


  <base href="/">

The setup for the routing is done in a new app.routing.ts file.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Then we can register this in the app.module.ts under the imports section.

Chris Sevilleja

156 posts

Co-founder of Slapping the keyboard until something good happens.