Here you will find my notes. I created very simple app base on https://angular.io/guide/router

Git
– https://github.com/szalek/AngularRoutExample
Setup
ng new AngularRoutExample ng g c home ng g c profile ng g c settings ng g c password
Run app
ng serve --watch true --poll 100 --host 0.0.0.0 --port 4200 -o
Docker
This step is not required, but if you don’t want to install node on you local you can use docker
– http://blog.michalszalkowski.com/docker/angular-cli-in-docker/
Project structure
Main file with routing configuration (app.module.ts)
... const appRoutes: Routes = [ {path: '', component: HomeComponent}, { path: 'profile', component: ProfileComponent, children: [ { path: 'password', component: PasswordComponent }, { path: 'settings', component: SettingsComponent } ] }, ]; ... imports: [ RouterModule.forRoot(appRoutes), ... ], ...
Other files
All other files has default content. Only two files, you have to modify
app.component.html
<nav> <a routerLink="/" routerLinkActive="active">Home</a> <a routerLink="/profile" routerLinkActive="active">Profile</a> </nav> <router-outlet></router-outlet>
profile.component.html
<h1> profile works! </h1> <nav> <a routerLink="/profile/settings" routerLinkActive="active">Settings</a> <a routerLink="/profile/password" routerLinkActive="active">Password</a> </nav> <router-outlet></router-outlet>