Call a class function in app routing module

Question

Hey guys I'm implementing a feature flag within my project, and it's a new login flow we're creating. If the feature flag is on (true), then we'll implement it by having the router first navigate to the new login flow, otherwise the default route would redirect to a different path.

I have a class to handle feature flags, and I'd implement them within the constructor of components that would use them, but in this scenario it's a little bit different. How do I import that class within the router? There's no class or constructor, and we're just exporting the const routes, so what should I do?

Here's my app routing module, I'll probably implement the spread operator or something to handle the assigning the proper route, I just want help on how to instantiate the class function in this file:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { FeatureFlagsService } from './common/feature-flag/feature-flags.service';
import { TrustFormComponent } from "./claims/components/trust-form/trust-form.component";
import { MaintenanceComponent } from "./shared/components/maintenance/maintenance.component";
import { LoginFlowComponent } from "./claims/components/login-flow/login-flow.component";


// FeatureFlagsService.showFeature // How do I do something like this?


export const routes: Routes = [
  {
    path: "login-flow",
    component: LoginFlowComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false
    },
  },
  {
    path: "eiduser",
    loadChildren: () =>
      import("./claims/claims.module").then((m) => m.ClaimsModule),
    data: {
      breadcrumb: "Dashboard",
      showBreadcrumb: true,
    },
  },
  {
    path: "trustuser",
    loadChildren: () =>
      import("./claims/claims.module").then((m) => m.ClaimsModule),
    data: {
      breadcrumb: "Dashboard",
      showBreadcrumb: true,
    },
  },
  {
    path: "claim-information",
    component: TrustFormComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false,
    },
  },
  {
    path: "maintenance",
    component: MaintenanceComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false,
    },
  },
  {
    path: "",
    redirectTo: "login-flow",
    pathMatch: "full",
    data: {
      breadcrumb: "",
      showBreadcrumb: false,
    },
  },
  // { // Other we'd route to this
  //   path: "",
  //   redirectTo: "eiduser",
  //   pathMatch: "full",
  //   data: {
  //     breadcrumb: "",
  //     showBreadcrumb: false,
  //   },
  // },
];

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

This is the feature flag service:

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable()
export class FeatureFlagsService {
  showFeature(featureName: string): boolean {
    // Read the value from the config service
    if (environment.featureFlags.hasOwnProperty(featureName)) {
      return environment.featureFlags[featureName];
    }
    return false; // if feature not found, default to turned off
  }
}

What do you guys recommend? I don't want to recreate this logic, how do I call this service directly within the router module?

PushpikaWan PushpikaWan · Accepted Answer · 2021-04-08T19:47:43

Here you can try out router guard concept.First of all you need to create service by implementing this can Activate. Then here you can inject feature flag service and do what ever thing you want when this routing happens.

@Injectable({
  providedIn: 'root'
})
export class YourGuard implements CanActivate {
  constructor(private featureService: FeatureFlagsService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.featureService.showFeature(....)) {
      return true;
    } else {
      return false;
    }
  }
}

Then you need to add this guard in your router like below

    const routes: Routes = [
     {
    path: "login-flow",
    component: LoginFlowComponent,
    data: {
      breadcrumb: "",
      showBreadcrumb: false
    },
    canActivate: [YourGuard]
  },.......
    ];

References: https://codecraft.tv/courses/angular/routing/router-guards/ , https://angular.io/api/router/CanActivate

Call a class function in app routing module

1 Answers