¿Cómo configurar la página 404 en el enrutamiento angular?

Para configurar una página 404 en el enrutamiento angular, primero debemos crear un componente para mostrar cada vez que ocurra un error 404. En el siguiente enfoque, crearemos un componente angular simple llamado PagenotfoundComponent . 

Crear componente: ejecute el siguiente comando para crear el componente pagenotfound .

ng generate component pagenotfound

Estructura del proyecto: Se verá así.

Implementación: agregue el siguiente código dentro de la plantilla HTML de este componente para mostrar un mensaje de error 404 simple.

<div>
    <h1>404 Error</h1>
    <h1>Page Not Found</h1>
</div>

Luego, dentro del archivo de enrutamiento, debemos proporcionar esta ruta de componentes y hacer que esté disponible para cada 404 requests. Entonces, dentro del archivo app-routing.module.ts , tenemos que crear una nueva ruta para este PagenotfoundComponent.

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 { }

Explicación: Aquí, la ruta para PagenotfoundComponent se proporciona dentro de la array de rutas. Aquí, cualquier ruta, excepto las rutas proporcionadas, es manejada por este PagenotfoundComponent y nuestra plantilla HTML se muestra en el navegador. Entonces, ahora, si alguien intenta enviar una solicitud a cualquier página que no esté presente en la array de rutas, ese usuario se desplazará automáticamente a este PagenotfoundComponent .

Pasos para ejecutar la aplicación: Ejecute el siguiente comando para iniciar la aplicación:

ng serve

Ahora abra el navegador y vaya a http://localhost:4200, donde todo funciona bien . Ahora vaya a http://localhost:4200/anything, donde obtendremos el error 404 como se muestra a continuación.