In this article, we will create 404 error page which will display when user access non-available route.
We have started tutorial after fresh Angular Project. We create seperate component for 404 error page which will display incase user access non route link. To create a new component, run the following ng command.
ng generate component page-not-found
This command will create new component folder page-not-found in src/app folder. The folder includes page-not-found.component.ts, page-not-found.component.html and page-not-found.component.css file.
In page-not-found.component.html file, input the the HTML code which you want to display in 404 error page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page not found</title>
</head>
<body>
<h1>Error 404</h1>
<p>The page you are looking for is not found.</p>
</body>
</html>
If your page has css code, put it in page-not-found.component.css file. The css in this file will only apply to this component only.
Now look at the page-not-found.component.ts file. This component has export class PageNotFoundComponent. Just before above, defined @Component decorator which provides metac data for the class. The selector property is the tag in parent component where the current component will load the HTML code.
The src/app/app.component.html file should have <router-outlet> tag where the current component will load its HTML template. So check the file should contain following tag.
<router-outlet></router-outlet>
The main html file located at src/index.html is main html file where Angular application loads in between <app-root></app-root> tag. So change the file with following one:
<base href="/">
<app-root></app-root>
Now Its time to setup routing. You generally have already have enabled routing when creating Angular application. Else you can create routing module with following command.
ng generate module app-routing --flat --module=app
This will create app-routing.module.ts file in the src/app folder. Now in this file, import PageNotFoundComponent component at the top of the file and put two new routes at the end of routes array.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PageNotFoundComponent } from './hero-detail/hero-detail.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent },
// all your other routes should come first
{ path: 'page-not-found', component: PageNotFoundComponent },
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
We have uses wildcard route for 404 error page. We have to add these routes only at the end of routes array. Angular routing uses first-match route while checking wildcard in routes.
Now run the following command in Terminal to start the application.
ng serve --open
This will open application in default browser. Now try to access /page-not-found or any non defined route, example http://localhost:4200/page-not-found.
This will render 404 error page.
