How to configure MsAdalAngular6Module at runtime?

Question

I am using this microsoft adal wrapper to manage authentication in an angular single page app: https://github.com/manishrasrani/ms-adal-angular6

And based on the documentation there I configure all the various options at compile time like this, which works as expected.

@NgModule({
imports: [
    MsAdalAngular6Module.forRoot({
      tenant: '<YOUR TENANT>',<-------------------------------- ADD
      clientId: '<YOUR CLIENT / APP ID>',<--------------------- ADD
      redirectUri: window.location.origin,
      endpoints: { <------------------------------------------- ADD
        "https://localhost/Api/": "xxx-bae6-4760-b434-xxx",
        ---
        ---
      },
      navigateToLoginRequestUrl: false,
      cacheLocation: '<localStorage / sessionStorage>', <------ ADD
    }),
    ---
    ---
  ],
  ---
  ---
})

But as I have and automated deployment pipeline with multiple environments (dev, test, prod, etc..) that requiring unique settings - I want to do this runtime instead. That is, I don't want to re-compile for each environment I deploy to.

I followed this guide on how to load settings from a json file at rutime: https://juristr.com/blog/2018/01/ng-app-runtime-config/ which works nicely, but how to get values loaded that way into the MsAdalAngular6Module at runtime?

Answer 1

I had the same problem, and I solved it by creating the only needed thing of the library, the MsAdalAngular6Service, in an own service. So I don't need to import the MsAdalAngular6Module. The disadvantage is that you can't use their AuthenticationGuard anymore. But that shouldn't be a big problem, it's a simple if-else, just have a look at their code.

My own Service looks like this:

import { Injectable } from '@angular/core';
import { MsAdalAngular6Service } from "microsoft-adal-angular6";
import { ConfigurationService } from "../configuration.service";

@Injectable( {
    providedIn: 'root'
} )
export class MsAdalAdapterService {

    private _adalSvc: MsAdalAngular6Service;

    constructor( private configService: ConfigurationService ) {
        this._adalSvc = new MsAdalAngular6Service( configService.adalConfig );
    }

    get adalSvc(): MsAdalAngular6Service {
        return this._adalSvc;
    }
}

Maybe that's useful for someone.