Angular2 routerLink
<p>I have been messing with Angular 2 and got stuck. Front page has list of topics to learn (TopicsComponent) .Clicking them will trigger path: '**' for now.  PageNotFoundComponent also uses TopicsComponent to show topics but routerLink wont work anymore. </p>

<p>Example: in front page when i click angular2 link i get url <strong>/angular2</strong>. But when PageNotFoundComponent is active i get url <strong>/angular2/(angular2)</strong></p>

<p>Here is the code:</p>

<p><strong>main.ts</strong></p>

<pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
import { appRouterProviders }   from './app.routes';

import { AppComponent } from './app.component';

bootstrap(AppComponent, [appRouterProviders]);
</code></pre>

<p><strong>app.routes.ts</strong></p>

<pre><code>import { provideRouter, RouterConfig }  from '@angular/router';

import { TopicsComponent } from './topics/topics.component';
import { PageNotFoundComponent } from './notfound/page-not-found.component';

const routes: RouterConfig = [

 {
  path: '',
  component: TopicsComponent
 },
 {
  path: '**',
  component: PageNotFoundComponent
 }
];

export const appRouterProviders = [
  provideRouter(routes)
];
</code></pre>

<p><strong>app.component.ts</strong></p>

<pre><code>import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopicsService } from './shared/topics.service';
import { TopicsComponent } from './topics/topics.component';
import { PageNotFoundComponent } from './notfound/page-not-found.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [KoodikoguService],
  precompile: [TopicsComponent, PageNotFoundComponent]
})
export class AppComponent { }
</code></pre>

<p><strong>topics.component.ts</strong></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopicsService } from './shared/topics.service';

@Component({
  selector: 'topics',
  templateUrl: 'app/topics/topics.component.html',
  directives: [ROUTER_DIRECTIVES] 

})

export class TopicsComponent { 
    title = 'Welcome to the topics component!';
    topics:any;

    constructor(private _dataService: TopicsService) {

    }

    ngOnInit() {
        this._dataService.getTopics().then(topics =&gt; this.topics = topics);
    }

}
</code></pre>

<p><strong>topics.component.html</strong></p>

<pre><code>&lt;h1&gt;{{ title }}&lt;/h1&gt;

&lt;div *ngFor="let topic of topics"&gt;
    &lt;a [routerLink]="topic.title" routerLinkActive="active"&gt;{{ topic.title }}&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p><strong>page-not-found.component.ts</strong></p>

<pre><code>import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopicsComponent } from '../topics/topics.component';

@Component({
  selector: 'not-found',
  templateUrl: 'app/notfound/page-not-found.component.html',
  directives: [TopicsComponent]

})
export class PageNotFoundComponent { }
</code></pre>

<p><strong>page-not-found.component.ts</strong></p>

<pre><code>&lt;h1&gt;Page not found!&lt;/h1&gt;

&lt;topics&gt;&lt;/topics&gt;
</code></pre>