Angular2 中的路由 - GET 404（未找到）

Question

所以我制作了一个运行良好的应用程序，但后来我发现顶部有两个链接的菜单栏没问题，所以我按照本教程进行操作：https://angular.io/docs/ts/latest/guide/router.html 但出了点问题。我无法让它工作，并且有这个错误： 获取http://localhost:3000/about/about.component 404（未找到） GET http://localhost:3000/home/home.component 404（未找到）

VSCode 没有显示任何问题。

主文件结构：

src
├───about
│ ├───about.component.html
│ ├───about.component.ts (and other .js and .js.map files)
├───app
│ ├───app.component.ts
│ ├───app.module.ts (and other .js and .js.map files...)
├───home
│ ├───home.component.html
│ ├───home.component.ts (other less relevant files)

在 index.html 中我添加了

app.module.ts:

import { RouterModule, Routes } from '@angular/router'
...
import { AppComponent }  from './app.component';
import { AboutComponent } from './../about/about.component';
import { HomeComponent } from './../home/home.component';

const appRoutes: Routes = [
  {
    path: '/home/home', //I've also tried home/home, home and so on
    component: HomeComponent,
  },
  {
    path: '/about/about',
    component: AboutComponent,
  },
]

@NgModule({
    imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),
    ....],
      declarations: [ AppComponent, AboutComponent, HomeComponent ],
    ....

app.component.ts：

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

@Component({
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/about" routerLinkActive="active">About</a>
    </nav>
    <router-outlet></router-outlet>
  `
})

export class AppComponent {

}

关于.component.ts：

import { Component } from '@angular/core'

@Component({
  selector: 'about',
  moduleId: module.id,
  template: `
  <p>ABOUT</p>
  `,
})

export class AboutComponent {

}

home.component.ts：

// imports

@Component({
  selector: 'home',
  moduleId: module.id,
  templateUrl: 'home.component.html',
  styleUrls: ['home.css'],
  providers: [HomeService],
})
export class HomeComponent {
// ...
}

问题可能与 routerLink 相关，但我尝试了几个不同的选项，但都不起作用。

Answer 1

访问这些路线：

http://localhost:3000/about/

http://localhost:3000/home/

使用此配置：

 const appRoutes: Routes = [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
        path: 'about',
        component: AboutComponent,
      },
    ]

在您的HomeComponent 中使用templateUrl 和styleUrls 中的相对路径，并将home.component.html 和home.css 与HomeComponent 放在同一个文件夹中：

@Component({
  selector: 'home',
  moduleId: module.id,
  templateUrl: './home.component.html',
  styleUrls: ['./home.css'],
  providers: [HomeService],
})
export class HomeComponent {
// ...
}