Video Course

Routing Angular v2+ Applications: Lesson 3 of 23

Starting Routing

Up Next

Router Links

Autoplaying in 7 seconds!

Cancel

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.

index.html

...
<head>
  ...
  <base href="/">
  ...
</head>
...

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 Scotch.io. Slapping the keyboard until something good happens.