Wildcard Routes or 404 page in Angular 4

404 page in angular 4

For that we need to create a component first page404

ng g c page4

–HTML File (page404.component.html)

<h2>Ops something wrong !!</h2>

–TS File (app.component.ts)

const appRoutes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'users', component: UsersComponent, children: [
    { path: ':id/:name', component: UserComponent},
  ]},
  { path: 'servers', component: ServersComponent, children: [
    { path: ':id', component: ServerComponent},
    { path: ':id/edit', component: EditServerComponent},
  ]},
  { path: 'error-404', component: Page404Component},
  { path: '**', redirectTo: '/error-404'}
]

Hit URL

http://localhost:4200/asfdsdf

and You will be redirect to

http://localhost:4200/error-404