Conditionally Load a Module Using Angular Router

In most cases, a feature flag is used when creating a new version of an existing page rather than adding multiple conditions to our code. When this is the case, we usually prefer to use the same URL for both versions.

Let’s examine how Angular Router can be used to get this done. If we take a quick look at Angular’s source code for the following line:

We’ll see that Angular provides the routes we pass to the ROUTES multi provider:

In that case, we’ll be able to provide it manually and use DI as well:

Utilizing useFactory, we provide the feature flag service as a dependency. We then use it to load the module we have permission to.

The Ultimate Guide to Implementing Feature Flags in Angular Applications

Optimize User Experience While Your Angular App Loads