27.06.2022

Combining config.json and MSAL

The issue

Reading a config file before everything else is one thing you might also use in your Angular app. Typical tutorials will use Angular's HttpClient to read the file during application startup and use the APP_INITIALIZER provider hook.

Everything works fine, until you add single sign-on authentication with MSAL (Microsoft Authentication Library) relying on config data for redirect URLs client IDs. If you follow the tutorial (Sign in users and call the Microsoft Graph API from an Angular single-page application) and also use MSAL Interceptor, you will encounter a cyclic dependency error.

The underlying reason is, in the end, that HttpClient relies on the MSAL Interceptor and therefore can not read the config file before initializing the MSAL config factories.

Using fetch()

My solution was to use the Fetch API for reading my config file. This does not need any Http Interceptors and therefore stands on its own. Fetch is returning a promise, therefore slightly unusual for RxJS-spoilt Angular developers. But it is not overly complex and does the job.

One example of using fetch is described in Loading Configuration Before Your Angular App Starts, but I could not use the @Inject tokens for the MSAL config factories. But still that different way of reading the json file worked out for my issue.