Angular — Route Guards and Strategy

Photo by Linda Finkin on Unsplash

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at how to add routing to our Angular app.

Preventing Unauthorized Access

We can access query parameters with Angular.

To do that, we run:

ng generate guard nav

to create our guard.

Then we have:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { NavGuard } from './nav.guard';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';
const routes: Routes = [
  {
    path: 'first-component', component: FirstComponent, canActivate: [NavGuard],
},
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule…