Preloading Strategies

FeatureFlagPreloadingStrategy

A preloading strategy that uses feature flags to determine whether or not to preload a module.

note

For more details about Angular preloading strategies, you can check those resources:

• Preloading Modules on Angular.io
• Optimize your Angular app's user experience with preloading strategies on DEV.to
• Preloading Strategies to Speed Up Angular App Loading Time on Medium

Usage

To use the FeatureFlagPreloadingStrategy, first specify the feature flag of your Route in the appropriate data property:

export const routes: Route[] = [
  {
    path: '...',
    loadComponent: () => import('./app/.../custom.component').then(
      (m) => m.CustomComponent
    ),
    data: { featureFlag: 'my-feature' },
  },
];

Default values and behavior

If the routing section is not provided, the FeatureFlagPreloadingStrategy will attempt to retrieve the feature flags from the featureFlag property of the Route's data.

If none is found, it will not preload the associated Route if not specified otherwise.

Then, provide the FeatureFlagPreloadingStrategy to the router's configuration:

Using providers

main.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withPreloading(FeatureFlagPreloadingStrategy)),

    provideNgxFlagr({ featureFlagService: FeatureFlagService }),
    provideNgxFlagrRouting(),
  ],
});

Using a module

app.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: FeatureFlagPreloadingStrategy }),

    NgxFlagrModule.forRoot({ featureFlagService: FeatureFlagService }),
    NgxFlagrRoutingModule.forRoot(),
  ],
})
export class AppModule { }

info

In case a feature flag is not detected for a specific Route, and ngx-flagr has been set up to exclude routes without any feature flags, a warning message will be displayed in the console (applicable only in development mode) to notify you which Route could potentially exhibit this unexpected behavior.