@angular/router#Route TypeScript Examples

generateResource(): Route {
    const resource = super.generateResource();
    return {
      ...resource,
      children: [
        {
          canActivate: [AuthGuard, RoleGuard],
          component: MissionsListComponent,
          data: { role: `ROLE_${this.type}_GET_LIST` },
          path: 'all',
        },
        {
          canActivate: [AuthGuard, RoleGuard],
          component: AddVulnsToHostExternalComponent,
          data: { role: `ROLE_${this.type}_PATCH` },
          path: ADD_VULN_ROUTE,
        },
        ...resource.children,
      ],
    };
  }

generateResource(): Route {
    const children = [
      ...this.getListRoute(),
      ...this.getEditRoute(),
      ...this.getCreateRoute(),
      ...this.getShowRoute(),
    ];

    return {
      canActivate: [AuthGuard],
      children,
      component: SideBarComponent,
      data: { role: `ROLE_${this.type}_GET_LIST` },
      path: this.basePath,
    };
  }

routes: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'example',
    pathMatch: 'full',
    component: ExamplePageComponent,
  },
  {
    path: 'register',
    component: RegisterComponent,
  },
  {
    path: 'user',
    component: UserPageComponent,
    canActivate: [AuthGuardService],
  },
  {
    path: 'admin',
    component: UserPageComponent,
    canActivate: [AuthGuardService],
    data: { roles: ['admin'] },
  },
]

isActive(route: Route | ActivatedRouteSnapshot) {
    return this.featureToggleService.toggles$.pipe(
      first(),
      map(configToggles => {
        const active = getDataPropertyValues(route, 'featureToggle')
          .map(t => {
            const value = configToggles[t];

            return value === undefined || value;
          })
          .reduce((acc, current) => acc && current, true);

        if (!active) {
          this.router.navigate([ '/' ], { queryParamsHandling: 'merge' });
        }

        return active;
      }),
    );
  }

/*
  Gets the propertyName values in all the segments of the route
 */
export function getDataPropertyValues(
  snapshot: ActivatedRouteSnapshot | Route,
  propertyName: string,
  values = new Array<any>(),
) {
  if (snapshot.data && snapshot.data.hasOwnProperty(propertyName)) {
    values.push(snapshot.data[propertyName]);
  }

  if (snapshot.children && snapshot.children.length) {
    getDataPropertyValues(snapshot.children[0], propertyName, values);
  }

  return values;
}

preload(route: Route, load: () => Observable<any>): Observable<any> {
    try {
      const { shouldPreload } = route.data;
      return shouldPreload
        ? this.loadRoute(route, load)
        : this.noPreload(route);
    } catch (e) {
      console.error(e);
      return this.noPreload(route);
    }
  }

routes: Route[] = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', component: HomeComponent },
      // #endregion
    ],
  },
  { path: 'demo', component: DemoComponent },
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '404' },
]

routes: Route[] = [
  {
    path: 'first',
    component: ScoreboardFirstRouteComponent,
  },
  {
    path: 'second',
    component: ScoreboardSecondRouteComponent,
  },
]

routes: Route[] = [
  {
    path: 'first',
    component: CounterFirstRouteComponent,
  },
  {
    path: 'second',
    component: CounterSecondRouteComponent,
  },
]

canLoad(route: Route): boolean | Observable<boolean> {
    return this.checkAuthentication(route.data && route.data['roles']);
  }

canLoad(route: Route, segments: UrlSegment[]): boolean | Promise<boolean> | Observable<boolean> {
    return this.handle();
  }

canLoad(route: Route, segments: UrlSegment[]): boolean | Promise<boolean> | Observable<boolean> {
    return this.handle();
  }

routes: Route[] = [
  {
    path: '',
    component: DashboardContainerComponent,
  },
]

canLoad(route: Route): boolean {
    // Store the entry url i.e. /admin-- > @Idrice am i not right?
    const url = `/${route.path}`;

    return this.checkLogin(url);
  }

canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> {
    return this.auth.isAuthenticated$.pipe(take(1));
  }

canLoad(route: Route): canActivateReturn {
    const url = `/${route.path}`;
    return this.checkLogin(url);
  }

noPreload(route: Route): Observable<any> {
    console.log(`No preloading set for: ${route.path}`);
    return of(null);
  }

loadRoute(route: Route, loadFn: () => Observable<any>): Observable<any> {
    console.log(`Preloading done for route: ${route.path}`);
    return loadFn();
  }

canLoad(route: Route) {
    return this.isActive(route);
  }

describe('FeatureToggleGuard', () => {
  let configServiceMock: LgFeatureToggleService;
  let guard: FeatureToggleGuard;
  const routerMock = mock(Router);
  const enabledConfig = { parent: true };
  const disabledConfig = { parent: false };
  const enabledConfig2 = { parent: true, child: true };
  const disabledConfig2 = { parent: false, child: false };
  const routeSnapshot: Partial<ActivatedRouteSnapshot> = {
    data: { featureToggle: 'parent' },
    children: [
      {
        data: { featureToggle: 'child' },
      } as any,
    ],
  };

  const checkGuardConfigs = (
    guardType: GuardTypes,
    config,
    marbleValue: boolean,
    onceVerify: boolean = false,
  ) => {
    /* eslint-disable @typescript-eslint/no-unused-expressions, no-unused-expressions */
    onceVerify
      ? when(configServiceMock.toggles$).thenReturn(config)
      : when(configServiceMock.toggles$).thenReturn(of(config));
    /* eslint-enable */

    switch (guardType) {
      case GuardTypes.CAN_ACTIVATE:

        expect(guard.canActivate(routeSnapshot as ActivatedRouteSnapshot)).toBeObservable(
          cold('(a|)', { a: marbleValue }),
        );

        break;

      case GuardTypes.CAN_ACTIVATE_CHILD:

        expect(
          guard.canActivateChild(routeSnapshot as ActivatedRouteSnapshot),
        ).toBeObservable(cold('(a|)', { a: marbleValue }));

        break;

      case GuardTypes.CAN_LOAD:

        expect(guard.canLoad(routeSnapshot as Route)).toBeObservable(
          cold('(a|)', { a: marbleValue }),
        );

        break;
    }

    return verify(
      routerMock.navigate(deepEqual([ '/' ]), deepEqual({ queryParamsHandling: 'merge' })),
    );
  };

  beforeEach(() => {
    configServiceMock = mock(LgFeatureToggleService);

    TestBed.configureTestingModule({
      providers: [
        FeatureToggleGuard,
        {
          provide: LgFeatureToggleService,
          useFactory: () => instance(configServiceMock),
        },
        { provide: Router, useFactory: () => instance(routerMock) },
      ],
    });

    guard = TestBed.inject(FeatureToggleGuard);
  });

  describe('can activate', () => {
    it('should be true when the parent is enabled', () => {
      checkGuardConfigs(GuardTypes.CAN_ACTIVATE, enabledConfig, true).never();
      reset(routerMock);
    });

    it('should be true when the parent and child is enabled', () => {
      checkGuardConfigs(GuardTypes.CAN_ACTIVATE, enabledConfig2, true).never();
      reset(routerMock);
    });

    it('should be false when the parent is disabled', () => {
      checkGuardConfigs(GuardTypes.CAN_ACTIVATE_CHILD, disabledConfig, false).once();
      reset(routerMock);
    });

    it('should be false when the parent is enabled but not child', () => {
      checkGuardConfigs(GuardTypes.CAN_ACTIVATE, disabledConfig2, false).once();
      reset(routerMock);
    });
  });

  describe('can activate child', () => {
    it('should be true when the parent is enabled', () => {
      checkGuardConfigs(GuardTypes.CAN_ACTIVATE_CHILD, of(enabledConfig), true).never();
      reset(routerMock);
    });

    it('should be true when the parent and child is enabled', () => {
      checkGuardConfigs(GuardTypes.CAN_ACTIVATE_CHILD, of(enabledConfig2), true).never();
      reset(routerMock);
    });

    it('should be false when the parent is disabled', () => {
      checkGuardConfigs(
        GuardTypes.CAN_ACTIVATE_CHILD,
        of(disabledConfig),
        false,
        true,
      ).once();

      reset(routerMock);
    });

    it('should be false when the parent is enabled but not child', () => {
      checkGuardConfigs(
        GuardTypes.CAN_ACTIVATE_CHILD,
        of(disabledConfig2),
        false,
        true,
      ).once();

      reset(routerMock);
    });
  });

  describe('can load', () => {
    it('should be true when the parent is enabled', () => {
      checkGuardConfigs(GuardTypes.CAN_LOAD, of(enabledConfig), true).never();
      reset(routerMock);
    });

    it('should be true when the parent and child is enabled', () => {
      checkGuardConfigs(GuardTypes.CAN_LOAD, of(enabledConfig2), true).never();
      reset(routerMock);
    });

    it('should be false when the parent is disabled', () => {
      checkGuardConfigs(GuardTypes.CAN_LOAD, of(disabledConfig), false, true).once();
      reset(routerMock);
    });

    it('should be false when the parent is enabled but not child', () => {
      checkGuardConfigs(GuardTypes.CAN_LOAD, of(disabledConfig2), false, true).once();
      reset(routerMock);
    });
  });
});