404 page setup in angular routing

Updated on July 13, 2020     Kisan Patel

How to 404 Page not found page setup in Angular Routing?

$ ng generate component notfound

Next, open the src/app/app-routing.module.ts file and add these two routes:

const routes: Routes = [
// [...]
{path: '404', component: NotFoundComponent},
{path: '**', redirectTo: '/404'}

];

Don’t forget to import the component in the routing module as follows:

import { NotFoundComponent } from ‘./notfound/notfound.component’;

We use the wildcard path denoted by ** to catch any non existing routes and we use the redirectTo property to redirect them to the /404 path which maps to the not found component.