Angular Basics-7

Photo by Jacky Zhao on Unsplash

Welcome to part-7 of Angular Basics series. In this part also, we will continue with routing. The starting point will be the code from the previous part. You can get the code from here.

We will first learn to do error handling with wildcard routes. We will first generate a new component with the command

ng g c page-not-found

We will update the page-not-found.component.html with appropriate text.


Next, in the app.module.ts file we will add a route of not-found and then a path of something redirecting to not-found.


Now, when we will go to something path, it will redirect to /not-found page.


Now, we cannot use something every time and Angular provides a special wildcard of double star to specify any routes. We will add the same in the app.module.ts file.


Now, when we will go to any non-existing route like http://localhost:4200/kkk, we will get the Page not found text.

Now, in our app module we have a lot of routes and typically in such cases we add a new file called app-routing.module.ts. Remove all routes from app.module.ts file and and also the line for RouterModule.


Now, app-routing.module.ts file will contain all the routes and also the required imports.


Now, back in the app.module.ts file we will add the AppRoutingModule.


Now, our app works a earlier in localhost with routing been seperated.


Now, we will learn to protect a route with the canActivateChild. But for that we will first create a fake auth service as auth.service.ts in the app folder.

Here, we have a login and logout function and also an isAuthenticated, which returns a promise after 800 ms.


Now, we will create an auth-guard.service.ts file. The component uses the canActivate which calls the isAuthenticated from authService and depending on the result, it will return true or navigate the user away to home.


Now, we will go to app-routing.module.ts file and will protect the servers route.


We also need to add the new services in our app.module.ts file.


Now, we are not able to access the server route and when we click on it, we are taken to the home route after 800 ms.


Now, we will finish the canActivate behavior by going to the home.component.html file and creating two buttons, which will call the onLogin and onLogout methods respectively.


Now, in the home.component.ts file we will add the onLogin and onLogout methods, which will call the authService to make the login true or false.


Now, our auth is complete and when we click on the login button, we are able to access the server after 800ms and clicking on logout again disables it.

You can find the code for the same in this github repo.

Auth done




Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

It is a perfect parabola, also at the vertex there is an unusual second parabolic shape.

Asynchronous JavaScript with async/await

YouTube Video | Year End Counter with SnowFlakes

How to build an Angular app without backend?

Algorithm Question: Remove Duplicates From Sorted Array

Shaping Data with JavaScript: Part 3 of the Code Fellows “Mastering Arrays” series

Upload files using multipart with Fastify and NestJS

10 Questions in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

API integration in Angular App with Proxy

A sweet Introduction to NgRx Angular

Configuring Environment Variables in Angular | Angular Environment

Creating Multi-Select Dropdown with Angular and Bootstrap 5