How to configure Angular v15.2 standalone application with MSAL

Question

Before in ngModule base angular application you use to add MsalRedirectComponent in the bootstrap property of AppModule :

bootstrap: [AppComponent, MsalRedirectComponent]

Now in V15.2 the AppModule have been replace by the boostrapApplication function in main.ts :

bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(
            BrowserModule,
            AppRoutingModule,
           ),       
        provideAnimations(),
        provideHttpClient(withInterceptorsFromDi())
    ]
})
    .catch(err => console.error(err));

How to add the MsalRedirectComponent bootstrap ?

I try to add an other call after the first :

bootstrapApplication(MsalRedirectComponent, {
    providers: [
        importProvidersFrom(
            BrowserModule,
            AppRoutingModule,),
        provideHttpClient(withInterceptorsFromDi())
    ]
})
    .catch(err => console.error(err));

But this didn't work, the redirect didn't fired.

Flo · Answer 1 · 2023-03-14T19:22:26.017

3

I'm not working with MsalRedirectComponent but it is a normal Component which manage redirects. Try extends on your app.component like this:

export class AppComponent extends MsalRedirectComponent {
  // Normal code....
}

The ngOnInit will be called in the MsalRedirectComponent. I hope it helps.

If you need it you can override it inside your AppCompnent

//...
override ngOnInit(): void {
  super.ngOnInit();
  // Your stuff
}
//...

Update

I have test it (with other components) and multiple call bootstrapApplication will work. You need to set the entry point in your index.html like this:

</head>
<body>
  <app-root></app-root>
  <app-redirect></app-redirect>
</body>
</html>

Then it should work.

Note NgModules are not "removed"! Standalone Components are only a new alternative to NgModules. So you can work with it!

edited Mar 14 '23 at 19:22

answered Mar 14 '23 at 19:09

Flo

2,232
2
11
18

Thx it's working, but it's not the most intuitive way... before : a simple array, after : extends a class and override methods... – Dadv Mar 15 '23 at 08:56
Question : How the angular cli know witch selector to use (app-root or app-redirect), we extends the base class (MsalRedirectComponent) and all two have a différent selector ? – Dadv Mar 15 '23 at 09:17
the app-root is the name of the Components selector (App.Component) and the app-redirect its the name of the MsalRedirectComponent (see in Github). If you change the name in the html as example you will see an error in the browsers console. – Flo Mar 15 '23 at 12:35
This helped me at first but then I changed it to the accepted answer, bcs this approach creates 2x app-root. You can check when in Angular Develop tools. – Saso Apr 10 '23 at 10:23

score 2 · Accepted Answer · answered Mar 15 '23 at 16:02

For information, i post my working solution : I decide to not use the extends class, instead i use the handleRedirectObservable build in Msal property.

In main.ts I add the router for auth:

bootstrapApplication(AppComponent, {

    providers: [
         provideRouter([{ path: 'auth', loadComponent: () => import('@azure/msal-angular').then(mod => mod.MsalRedirectComponent) }]),

        importProvidersFrom(
            BrowserModule,
            AppRoutingModule,
           ),       
        provideAnimations(),
        provideHttpClient(withInterceptorsFromDi())
    ]
})
    .catch(err => console.error(err));


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styles: [],
  standalone: true,
  imports: [CommonModule,RouterOutlet]
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(  
    private msalService: MsalService,
  ) {
     }

  ngOnInit(): void {
      this.msalService.handleRedirectObservable().subscribe();
  }
}

For me this solution helped except I didn't add the 'auth' in the provedRouter and I didn't subscribe to the handleRedirect in the app component, instead in the service. handleRedirect$: Observable = this.msalService.handleRedirectObservable(); And then in the ngOnInit() { this.handleRedirect$.pipe(takeUntil(this._destroying$)).subscribe(); } — Saso, Apr 13 '23 at 08:00
I used auth because i prefered to separate the auth callback from the 'real' routes navigation. For the handleRedirect, msalService is already a service, so I didn't see the use of re-wraped it in a service for only a single observable. — Dadv, May 22 '23 at 15:08

score 0 · Answer 3 · answered Aug 29 '23 at 18:00

MSAL now officially supports Standalone components:

bootstrapApplication(AppComponent, {
    providers: [
        ...
        provideHttpClient(withInterceptorsFromDi()),
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        {
            provide: MSAL_INSTANCE,
            useFactory: MSALInstanceFactory
        },
        {
            provide: MSAL_GUARD_CONFIG,
            useFactory: MSALGuardConfigFactory
        },
        {
            provide: MSAL_INTERCEPTOR_CONFIG,
            useFactory: MSALInterceptorConfigFactory
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService
    ]
})

See the docs: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-standalone-sample

How to configure Angular v15.2 standalone application with MSAL

3 Answers3

Update