RC4 - 'routerLink'にバインドできません。これは、既知のネイティブプロパティではないためです。

Question

古いルーターが悩んでいるチュートリアルを完了しようとしています。私は新しいルータを使用するコードを更新しましたが、私はrouterLinkを理解することができません。援助に感謝します。

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 
import {APP_ROUTER_PROVIDERS} from './app.routes'; 

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS, 
]) 
.catch(err => console.error(err)); 

app.component.ts

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router'; 
import {AboutComponent} from './components/about/about.component'; 
import {SearchComponent} from './components/search/search.component'; 

export const routes: RouterConfig = [ 
    { path: '', component: SearchComponent }, 
    { path: 'about', component: AboutComponent }, 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

app.component.html

<navbar-top></navbar-top> 
<div class="main"> 
    <div class="container"> 
     <router-outlet></router-outlet> 
     </div> 
</div> 

ナビゲーションバー-top.component.html

<ul class="nav navbar-nav"> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about">About</a></li> 
     </ul> 

systemjs.config.js

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 

    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    }; 

    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade', 
    ]; 

    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 

    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 

    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 

    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 

    // No umd for router yet 
    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; 

    var config = { 
    map: map, 
    packages: packages 
    }; 

    System.config(config); 

})(this); 

ナビゲーションバー、top.component .ts

import { Component } from '@angular/core'; 
@Component({ 
    moduleId:module.id, 
    selector: 'navbar-top', 
    templateUrl: 'navbar-top.component.html' 
}) 
export class NavbarTopComponent { } 

Answer 1

import { Component } from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; //<-------- required 

@Component({ 
    moduleId:module.id, 
    selector: 'navbar-top', 
    templateUrl: 'navbar-top.component.html', 

    directives: [ROUTER_DIRECTIVES] //<-------required 

}) 
export class NavbarTopComponent { }