Angular 2 Routing (Komponente kann nicht geladen werden)

Question

Aus irgendeinem Grund sucht angular 2 in app/app/aboutus.component nach meiner Komponente und ich kann nicht finden, wo das Problem auftaucht.

app.component.ts

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

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    directives:[ROUTER_DIRECTIVES] 
}) 
export class AppComponent { } 

aboutus.component.ts

import {Component, OnInit} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angularS/router'; 

@Component({ 
    selector: 'about-us', 
    templateUrl: 'app/aboutus.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class AboutUsComponent { 
    teammembers: String[]; 
    constructor() { 

    } 
    ngOnInit() { 
     this.teammembers = ['raja', 'steve', 'trevor']; 
    } 

} 

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router'; 

import { AboutUsComponent } from 'aboutus.component'; 

export const routes: RouterConfig = [ 
    {path: 'aboutus', component: AboutUsComponent} 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

main.ts

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

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS 
]); 

app.component.html

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="javascript:void(0)">Angular 2 Routing</a> 
    </div> 
    <div class="navbar-collapse collapse navbar-responsive-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a>Pricing</a></li> 
     <li><a [routerLink]="['AboutUs']">About Us</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 
<router-outlet></router-outlet> 

Die Vorlage I routen wollen ist aboutus.html, die nur einen <h1>-Tag hat. Ich beginne gerade mit dem Routing von Angular 2 und habe Probleme damit, eckig zu werden, um meine Komponenten zu finden. Von jetzt an erhalte ich einen XHR 404-Fehler auf der aboutus.component.js und ich habe eine npm-Installation ausgeführt.

Answer 1

Für andere Fehler dies versuchen,

export const routes: RouterConfig = [ 
    {path: '', component: AboutUsComponent} 
{path: 'aboutus', component: AboutUsComponent} 
];