Angular Wildcard Route: «Страница не найдена» также появляется на localhost: 4200

Question

«Страница не найдена» также появляется на localhost: 4200. Но список отделов и список сотрудников работают нормально. Как я могу удалить «Страница не найдена» из дома?

приложение-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './department-list/department- 
list.component';
import { EmployeeListComponent } from './employee-list/employee- 
list.component';
import { PageNotFoundComponent } from './page-not-found/page-not- 
found.component';

const routes: Routes = [
{ path: 'departments', component: DepartmentListComponent},
{ path: 'employee', component: EmployeeListComponent},
{ path: "**", component: PageNotFoundComponent}
];

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

export const rountingComponent = [DepartmentListComponent, 
EmployeeListComponent, PageNotFoundComponent]

app.module.ts

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

import { AppComponent } from './app.component';
import { AppRoutingModule, rountingComponent } from './app-routing.module';

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

app.component.html

<div style="text-align:center">
  <h1>
    Routing and Navigation
  </h1>
</div>
<nav>
  <a routerLink="/departments" routerLinkActive="active">Departments</a>
  <a routerLink="/employee" routerLinkActive="active">Employees</a>
</nav>
<router-outlet></router-outlet>

localhost: 4200 следует перенаправить на app.component.html, который отображает «Маршрутизация и навигация» и две кнопки.

Answer 1

Мне кажется, проблема в том, что в вашей роутер-розетке ничего не отображается.Как указано в комментариях, у вас должен быть маршрут, определенный в ваших маршрутах.Если Angular не может найти указанный маршрут, вы получите ошибку 404.Вы можете добавить маршрут ниже, чтобы перенаправить на существующий маршрут.

const routes: Routes = [
{ path: 'departments', component: DepartmentListComponent},
{ path: 'employee', component: EmployeeListComponent},
{ path: '', redirectTo: '/departments', pathMatch: 'full'}
{ path: "**", component: PageNotFoundComponent}
];

Надеюсь, это поможет.

Answer 2

Вы также должны определить маршрут Home:

{ path: 'departments', component: DepartmentListComponent},
{ path: 'employee', component: EmployeeListComponent},
{ path: '', component: HomeComponent},
{ path: "**", component: PageNotFoundComponent}