Passing configuration dynamically from one module to another module using ModuleWithProviders (Angular 2+)

4 min readAug 27, 2019

Imagine that you have created a reusable module in angular. And you are in a situation where you need to pass some configuration dynamically into this module. How do we achieve this?

ModuleWithProviders to the rescue!

You guessed it right! This is a perfect situation to use ModuleWithProviders Interface from Angular Core.

https://angular.io/api/core/ModuleWithProviders

Code Time!

To demonstrate this, I’m gonna take an example of building initial stages of an authentication module.

I have created a new angular project using angular cli and created an angular module using the below command.

ng g module Authentication

AuthenticationModule generated using cli

Next, Let’s create a type definition file within our Authentication module called as authentication.d.ts. This will define the interface as below.

TokenConfiguration interface in type definition file

The whole idea behind creating this interface is that, Authentication module will take a configuration of type TokenConfiguration and use this configuration within its internal services. Having said that, it’s time to create a service within our Authentication module.

AuthenticationService

Imagine that, this will be the service that is going to use the configurations provided in the module level. This will have the logic for calling API with the correct url, scope. As well as getting refresh token after given time ( We will not implement all these logic now, as our main focus is on how to pass the configuration from one module to another module)

If you notice, we will be injecting the configuration into this service(I have added a console log within the constructor to test this later)

Time to use ModuleWithProviders

Now, we have done all the the setup for our use case, let’s update the code in Authentication Module like below using ModuleWithProviders and pass the token configuration from AppModule.

Making the Authentication Module to receive token configuration

Passing the token configuration from AppModule to AuthenticationModule via loadConfig()

Whats going on here?

There are couple of things which we are doing here.

We are importing HttpClientModule. This is to make sure that, we are not forcing the users of our AuthenticationModule to import HttpClientModule into their module.
We are exposing a static method loadConfig, which can take token configuration and returns ModuleWithProviders type.
If you notice, this method internally creates the providers required for Authentication Module based on the configuration passed and returning the Module along with the created providers (ModuleWithProviders!)
We are using HttpXhrBackend and resolving the dependency of AuthenticationService with the help of FactoryProvider. This is because, we want this module to get initialised with token configuration only when some one injects an HttpClient as dependency. We will see how this works below.
At last, we are passing the token configuration from AppModule to AuthenticationModule using loadConfig(). The users of this module will not be aware of the internals of AuthenticationModule.

Time to verify the setup

First, let’s do ng serve, open the application and check the browser console. You will not see any console log from AuthenticationService.
Now, let’s inject HttpClient into one of the component.

3. Now if you check the browser console, you will be able to see the token configuration which we passed has been logged by AuthenticationService.

Token configuration logged by AuthenticationService

This happens because, when we inject HttpClient, the dependency for HttpXhrBackend gets resolved with our setup.

Summary

In this article, we have seen how to pass a configurations from one module to another module by using ModuleWithProviders with the example of building initial stages of Authentication Module

You can use the below links to see the code samples: