Question

出于某种原因，角度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路由，并且在获取角度以找到我的组件方面遇到了问题。截至目前，我在aboutus.component.js上收到XHR 404错误，我已经运行了npm安装。

Answer 1

对于其他错误，请尝试此操作，

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

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

1 个答案: