如何在角度路由中设置 404 页面？

要在角度路由中设置 404 页面，我们必须首先创建一个组件，以便在发生 404 错误时显示。在下面的方法中，我们将创建一个名为PagenotfoundComponent的简单角度组件。

创建组件：运行以下命令创建pagenotfound组件。

ng generate component pagenotfound

项目结构：它看起来像这样。

实现：在该组件的 HTML 模板中添加以下代码以显示简单的 404 错误消息。

pagenotfound.component.html

    
404 Error
    
Page Not Found

然后在路由文件中，我们必须提供这个组件路由，并使其可用于每个 404 请求。因此，在app-routing.module.ts文件中，我们必须为这个 PagenotfoundComponent 创建一个新路由。

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PagenotfoundComponent } from 
    './pagenotfound/pagenotfound.component';
import { PostCreateComponent } from 
    './posts/post-create/post-create.component';
import { PostListComponent } from 
    './posts/post-list/post-list.component';
  
const routes: Routes = [
    { path: '', component: PostListComponent },
    { path: 'create', component: PostCreateComponent },
    { path: 'edit/:postId', 
        component: PostCreateComponent },
  
    //Wild Card Route for 404 request
    { path: '**', pathMatch: 'full', 
        component: PagenotfoundComponent },
  
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

说明：这里PagenotfoundComponent的路由是在 routes 数组中提供的。这里除了提供的路由之外的任何路径都由这个PagenotfoundComponent处理，并且我们的 HTML 模板显示在浏览器中。因此，现在如果有人尝试向路由数组中不存在的任何页面发送请求，那么该用户将自动导航到此PagenotfoundComponent 。

运行应用程序的步骤：运行以下命令启动应用程序：

ng serve

现在打开浏览器并转到http://localhost:4200，一切正常。现在转到http://localhost:4200/anything，我们将得到如下所示的 404 错误。