How to set up a route for custom 404 page in Angular Project

You can simpally do it

{
    path        : '**',
    pathMatch   : 'full',
    component   : WrongRouteComponent
}

Put this wildcard route in your routing file at last in routes array.

I hope it helps you.

wild card route will catch all paths that you don’t know (undefined routes in your constant). Undefined URL causes the router to throw an error and crash the app.

Normally routes are read from top to bottom, that's why it's important to keep wild card route ('**') at the end of the route list. If you kept this on top, all the other routes will be taken as undefined.

You can use it as below.

{path: ‘not-found’ , component: ‘NotFoundComponent’}
{path: ‘**’ , redirectTo: ‘/not-found’}

Or

 { path: '**', component: NotFoundComponent}

Please change path '404' to **

So,the routes should be

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: '/dashboard', component: DashboardComponent},
  { path: '/userprofile', component: UserprofileComponent},

  //Wrong route
  { path: '**', component: WrongRouteComponent},

];