@Angular路由无法正常工作 - 404

Question

当我运行角度路由器时，我得到404 status - page not found

我一直在尝试按照@angular文档来获取测试站点设置的路由。

• Angular Routing Tutorial
• Angular Router Guide

它部分有效，因为我在app-routing.module.ts文件中设置了重定向，并成功从localhost:4200重定向到localhost:4200/test。

然而，一旦在该路径上，我得到404错误。它应该显示我路由到该路径的组件。

代码

我有一个名为异常的组件

项目结构

遗漏我认为与此问题无关的文件（我使用ng命令构建项目，所以其余部分应该符合预期）

app/
  anomalies/
    anomalies.component.css
    anomalies.component.html
    anomalies.component.spec.ts
    anomalies.component.ts
  app-routing.module.ts
  app.module.ts

APP-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AnomaliesComponent } from './anomalies/anomalies.component';


const routes: Routes = [
  {
    path: 'test',
    component: AnomaliesComponent
  },
  {
    path: '',
    redirectTo: 'test',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})

export class AppRoutingModule {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { AnomaliesComponent } from './anomalies/anomalies.component';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    AnomaliesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

异常/ anomalies.component.html

<p>
  anomalies works!

  well, not yet.
</p>

Answer 1

防御两件事，以防错过：

1. index.html应该有一个 <base-href='/'>

2. 您应该在app.component.html中定义路由器出口 <router-outlet></router-outlet>

Answer 2

app.component.html

中需要<router-outlet>标记

代码

app.component.html

<router-outlet></router-outlet>