Skip to content

Angular, router small example

2017-12-28 15:15:40

Here you will find my notes. I created very simple app base on



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 --port 4200 -o


This step is not required, but if you don't want to install node on you local you can use docker -

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: [

Other files

All other files has default content. Only two files, you have to modify


<a routerlink='"/"' routerlinkactive='"active"'>Home</a>
<a routerlink='"/profile"' routerlinkactive='"active"'>Profile</a>



 profile works!

<a routerlink='"/profile/settings"' routerlinkactive='"active"'>Settings</a>
<a routerlink='"/profile/password"' routerlinkactive='"active"'>Password</a>