CODEWITHSUNDEEP
angularmsal-angularangular-standalone-components
Dadv
Dadv

Reputation: 413

How to configure Angular v15.2 standalone application with MSAL

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.

Upvotes: 5

Views: 5230

Answers (3)

Jonathan
Jonathan

Reputation: 904

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

Upvotes: 7

Dadv
Dadv

Reputation: 413

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();
  }
}

Upvotes: 4

Flo
Flo

Reputation: 3137

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!

Upvotes: 4

Related Questions