Angular is great at creating SPAs (Single Page Apps). Combined with Angular’s routing, you can have multiple pages that are each unique sub-URLs (eg. https://my-app.com/page1, https://my-app.com/page2, etc.). If your app sends out emails to users, you could have a scenario where you want them to open your app and go to a specific page. This can be a little tricky when your app requires a user to log in before certain pages are available.

Angular Route Guards to the Rescue!

You may already know about Angular route guards if you have a web app requiring authorization. If you are not familiar with Angular route guards, the most common use case is to prevent unauthorized access to pages in your app. You can read more at the link below.

Open your app’s routing module (usually in the file app-routing.module.ts). It should look something like this:

const routes: Routes = [
  {
    component: DefaultPageComponent,
    path: '',
    pathMatch: 'full',
    title: 'My App Name'
  },
  {
    component: LoginPageComponent,
    path: 'login',
    title: 'Login'
  },
  {
    component: LandingPageComponent,
    path: 'landing',
    title: 'My App Name'
  },
  {
    canActivate: [AuthGuard],
    loadChildren: (): any => import('./pages/products/products.module')
      .then((module: any) =>  module.ProductsModule),
    path: 'products',
    title: 'Products'
  },
  {
    canActivate: [DeepLinkingGuard, AuthGuard],
    loadChildren: (): any => import('./pages/product-details/product-details.module')
      .then((module: any) =>  module.ProductDetailsModule),
    path: 'product-details',
    title: 'Product Details'
  }
];

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule {}

In this example, there are four expected paths (URLs) for your app: