Call a class function in app routing module

  angular, angular-router, typescript

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?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.