【问题标题】：@Angular routing not working - 404@Angular 路由不起作用 - 404
【发布时间】：2018-01-23 01:07:23
【问题描述】：

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

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

它部分工作，因为我在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>

【问题讨论】：

我无法理解您面临的问题。您说它成功重定向。即使它重定向，html 也没有加载，它会抛出这个错误？
是的，没错
老兄，我确实复制并粘贴了您的代码，它确实有效。尝试停止应用程序并再次提供它。或者这是一个我以前从未见过的问题。 github.com/garapa/studying/tree/master/testRouting
我已经停止并启动了它，但遇到了同样的问题......也许你是对的，这是一个新问题。会继续尝试更长的时间
你能把一段代码放到stackblitz.com/edit/angular-grc3nx中吗？

标签： angular

【解决方案1】：

定义两件事以防错过：

index.html 应该有一个 <base-href='/'>
您应该在 app.component.html 中定义路由器插座 <router-outlet></router-outlet>

【讨论】：

【解决方案2】：

app.component.html 中需要<router-outlet> 标签

代码

app.component.html

<router-outlet></router-outlet>

【讨论】：