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