I have an Angular app that uses authentication against Azure/EntraID with the module MsalModule.
For that I need to initialize it in app.module.ts.
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';
// ...
@NgModule({
declarations: [
// ...
],
imports: [
// ...
MsalModule.forRoot (new PublicClientApplication ({
auth: {
// app-specific settings here!!!
redirectUri: "http://localhost:4200",
clientId: "abcdefgh....",
authority: "https://login.microsoftonline.com/xyz..."
},
Is there a way I can place these settings into a component?
So I would be able to use the settings out of a central configuration and not having it hardcoded.
Try import in providers using importProvidersFrom, Many third party libraries have also been updated to support this provide (I don’t know if MsalModule allow it)
providers:[
importProvidersFrom(MsalModule.forRoot (
new PublicClientApplication ({...}))
]
Update. We can do in the cmponent but I imagine better use when bootstrap the aplication
In general, when boostrap the aplication
bootstrapApplication(RootComponent, {
providers: [
..providers you need..
..add:
importProvidersFrom(MsalModule.forRoot (
new PublicClientApplication ({...}))
]});
2