NGSuite's SerialGuard is a feature that makes it possible to call multiple route guards in tandem. There are two types of Serial Guard: The SerialGuard decorator and the SerialGuardFn function. Both the SerialGuard decorator and the SerialGuardFn accept the SerialGuardInfo object as an argument.

The SerialGuardInfo object consists of only 2 properties:

• entries: Chain<GuardEntry>[];
• providers?: StaticProvider[];

The entries property contains a list of Classes that implement the GuardEntry interface. These are guard entries that will be called serially.

The optional providers property contains a list of providers that can be injected into each guard entry.

import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";

export class AuthGuardEntry implements GuardEntry {

  invoke(route: ActivatedRouteSnapshot, state: RouterStateSnapshot, data: GuardDataInterface): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    ...
    return true;
  }

}

The SerialGuard decorator is used with a class to generate a master route guard that chains up the guard entries for serial execution.

Creating a serial guard with the SerialGuard decorator:

@SerialGuard({
  entries: [
    AuthGuardEntry,
    SecondGuardEntry,
    ThirdGuardEntry
  ],
  providers: []
})
export class UserAccessGuard { }

The SerialGuardFn function generates a master route guard that chains up the guard entries for serial execution.

Creating a serial guard with the SerialGuardFn function:

const UserAccessGuard = SerialGuardFn({
  entries: [
    AuthGuardEntry,
    SecondGuardEntry,
    ThirdGuardEntry
  ],
  providers: []
});

const routes: Routes = [
  {
    path: '',
    component: AccessPage,
    canActivateChild: [ UserAccessGuard ],
    children: [
      {
        path: '',
        redirectTo: 'signin',
        pathMatch: 'full'
      },
      ...
      {
        path: 'signup',
        component: AccessSignupPage,
        canActivate: [ UserAccessGuard ]
      }
    ]
  }
];

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