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

Question

因此，我制作了一个工作良好的应用程序，但后来我发现菜单栏顶部有两个链接就没问题，所以我按照这个教程：https://angular.io/docs/ts/latest/guide/router.html但有些错误。我不能让它工作，有这样的错误： GET 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 { 

} 

about.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, 
     }, 
    ] 

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

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