I have a question on how to re-initialise Angular providers declared in the app.module.ts.

I'm trying to build an application based on the Microsoft MSAL 2.x Angular12 exemplar project that offers both B2B and B2C authentication flows. The Microsoft MSAL Angular exemplar uses HTTP_INTERCEPTORS and MSAL_INSTANCE which are created on initial application loading.

However, I want the web page that offers the user B2B or B2C login to be part of the single Angular application. But as per the Microsoft example, the providers are already instantiated on application startup.

How do I respond to the user selecting B2B or B2C which then defines which Azure Active Directory identity provider to authenticate the user?

The clientId for the Active Diretory configuration that should be variable is at line 50/51 of the app.module.ts file.

The user event that would trigger the defining of B2B or B2C is through the buttons defined on the app.component.html (and associated app.component.ts - line 65).

See Stackblitz at: https://stackblitz.com/edit/angular-ivy-e18xqa?file=src/app/app.module.ts

Any ideas or thoughts greatly appreciated.