Angular2中的路由 - GET 404(未找到)
问题描述:
因此,我制作了一个工作良好的应用程序,但后来我发现菜单栏顶部有两个链接就没问题,所以我按照这个教程: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(未找到)Angular2中的路由 - GET 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,但我试过几个不同的选择,并没有奏效。
答
访问这些路线:使用
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 {
// ...
}
我已经试过了。它不起作用,它会在控制台中提示完全相同的错误。 – codddeer123
尝试在路径中没有引导斜杠。看到更新。显示错误if –
for path:'home'and path:'about' - 'http:// localhost:3000/about/about.component加载资源失败:服务器响应状态为404(Not Found )'和'http:// localhost:3000/home/home.componentFailed加载资源:服务器响应状态为404(Not Found)'。对于路径:'/ home'这个错误是完全一样的。此外还有另一条消息:'message:'(SystemJS)XHR错误(404 Not Found)加载http:// localhost:3000/home/home.component ...“' – codddeer123