title: Angular2 routerLink
body: <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>