Angular 2 navbar routing

Question

First of all i am new to angular.

I am having some troubles making the "[routerLink]" work in navbar. When i click the links nothing happens, however if i access the links directly (localhost:port/client1)they work.

the home.component.ts

import { Component } from "@angular/core";

@Component({
templateUrl: 'app/Components/home.component.html'
})

export class HomeComponent {
}

the home.components.html

  <div>
     <nav class='navbar navbar-inverse'>
        <div class='container-fluid'>
            <ul class='nav navbar-nav'>
                <li><a [routerLink]="['client1']">Client 1</a></li>
                <li><a [routerLink]="['client2']">Client 2</a></li>
            </ul>
        </div>
     </nav>
     <div class='container'>
        <router-outlet></router-outlet>
     </div>
      </div>  

client1 and client2(same img display)

import { Component } from "@angular/core";

@Component({
    template: `<img src="../../images/users.png" style="text-align:center"/>`
})

export class Client1Component {
}

app.routing.ts

import { HomeComponent } from './components/home.component';
import { Client1Component } from './components/client1.component';
import { Client1Component } from './components/client2.component';

const appRoutes: Routes = [
    ...
    { path: 'home', component: HomeComponent },
    { path: 'client1', component: Client1Component },
    { path: 'client2', component: Client2Component },
    ...
];

and app.moule.ts

import { Client1Component } from './components/client1.component';
import { Client2Component } from './components/client2.component';
import { HomeComponent } from './components/home.component';

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule, RouterModule],
    declarations: [AppComponent, HomeComponent, Client2Component, Client1Component],
    bootstrap: [AppComponent]
})

EDIT:

Had to set the path of links as child path (app.routing.ts)

    const appRoutes: Routes = [
        ...
        { path: 'home', component: HomeComponent, children: [ 
            { path: 'client1', component: Client1Component },
            { path: 'client2', component: Client2Component }
        ]},
        ...
    ];

Answer 1

Need to export routes to your app.module.ts

app.routing.ts

const appRoutes: Routes = [
    ...
    { path: 'home', component: HomeComponent },
    { path: 'client1', component: Client1Component },
    { path: 'client2', component: Client2Component },
    ...
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

Also you can link to routes like this

<li><a routerLink="/client1">Client 1</a></li>

Answer 2

A library I have found useful is @uirouter/angular. You would have an app.states.ts which would look like this

import {myDestinationState} from 'my/state/path/myState.state';
export const APP_STATES = [myDestinationState];
export const APP_NAV = [{name: 'myState, state: myDestinationState}];

and then wherever you want to the nav to end up you have a myDestination.state.ts like this

import {myCustComponent} from ./myCust.component';
export const myCustomState = {
    name: 'my-custom-state',
    url: 'myApp/customState',
    component: myCustComponent
};

and then you navigate to that page using the function this.stateService.go('my-custom-state'). Or you can imort your APP_NAV constant and access the state through that.