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.

page-not-found.component.html

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.

app.module.ts

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

something

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.

app.module.ts

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.

app.module.ts

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

app-routing.module.ts

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

app.module.ts

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

localhost

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.

auth.service.ts

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.

auth-guard.service.ts

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

app-routing.module.ts

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

app.module.ts

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.

Home

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.

home.component.html

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.

home.component.ts

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

How to Create Installer for JxBrowser Application

Task-Manager-App and Firebase

NextJS — Next level React framework.

Best Headless CMS for 2020

4 Dangerous Problems in JavaScript Easily Solved by the Builder Design Pattern

Why is React commonly used?

Crazy Little Thing Called Redux

A Simple Introduction to Web Workers 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

Compile Angular Application

A sweet Introduction to NgRx Angular

What is Angular Material?

Angular and Angular Material Logos

How to Upgrade Angular Version in Existing Angular Project