javascript - ルーターリンクを含むテンプレートコンポーネントを注入するときの Angular2 ルーターリンクの問題

Question

ルーターリンクを含むテンプレートコンポーネントを注入するときの Angular2 ルーターリンクの問題

app.ts ファイルがあり、ナビゲーション コンポーネントを app.ts ファイルに依存性注入したいと考えています。

テンプレートを持ち、機能を持たないナビゲーション コンポーネントを作成しました。テンプレートは app.ts に問題なく挿入されます。ただし、ルート リンクをテンプレートに追加すると、ルーター リンクのみを使用すると、常にコンソール エラーが発生します。

これが私のナビゲーション コンポーネントの ts ファイルです。

 import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

 @Component({
   selector: 'HeaderNavigation'
 })

 @View({
   templateUrl: '/src/app/components/header/header.html'
 })

 export class HeaderNavigation{

 }

これが私のナビゲーションコンポーネントのhtmlファイルです:

 <header>
     <nav class="navbar navbar-default">
        <ul class="nav navbar-nav navbar-right">
           <li class="active"><a [router-link]="['./Login']">Log In</a></li>
         </ul>
     </nav>   

     <router-outlet></router-outlet>       
 </header>

これは私の app.ts ファイルです: このファイルは上記のナビゲーション コンポーネントを挿入します:

 import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
 import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
 import {Injectable} from 'angular2/angular2';
 import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';

 import {Login} from './components/login/login';
 import {HeaderNavigation} from './components/header/header';

 @Component({
     selector: 'app'
 })

 @View({
     template: `
         <HeaderNavigation></HeaderNavigation>

         <div class="content">
             <router-outlet></router-outlet>    
         </div>
     `,
     directives: [RouterOutlet, RouterLink]
 })

 @RouteConfig([
     { path: '/', redirectTo: '/login' },
     { path: '/login', component: Login, as: 'Login' }
 ])

 @Injectable()

 export class AppComponent {
     constructor(){}
 }

 bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS]);

これは、コンソールから表示されるエラー メッセージです。