import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor() { }
}

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule} from '@angular/router'

import { AppComponent } from './app.component'
import {Home} from './home.component'
import {Dashboard} from './dashboard.component'
import {Contact} from './contact.component'

@NgModule({
  imports: [ BrowserModule,
  RouterModule.forRoot([
    {path: 'home', component: Home},
    {path: 'dashboard', component: Dashboard},
    {path: 'contact', component: Contact},
    {path: '', redirectTo: '/home', pathMatch: 'full'}
    ])],
  declarations: [ AppComponent, Home, Dashboard, Contact ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {Component} from '@angular/core'

@Component({
  template: `
    <h2>Home</h2>
    <nav>
      <a routerLink="/dashboard">Dashboard</a>
      <a routerLink="/contact">Contact</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class Home {
  constructor() { }
}