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.

Table of Contents

    Chris Sevilleja

    173 posts

    Founder of Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.