Angular 2 路由（无法加载组件）

Question

出于某种原因 angular 2 正在 app/app/aboutus.component 中寻找我的组件，但我似乎无法找到问题所在。

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>

我要路由到的模板是 aboutus.html，它只有一个 <h1> 标签。我刚刚开始使用 Angular 2 路由，并且在让 angular 找到我的组件时遇到了问题。截至目前，我在 aboutus.component.js 上收到 XHR 404 错误并且我有运行一个 npm 安装。

Answer 1

对于其他错误试试这个，

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

Angular 2 路由（无法加载组件）

Angular 2 Routing ( cannot load component)

angularjs

typescript

angular-routing

angular