如何为Angular v15.2独立应用配置MSAL并引导MsalRedirectComponent

你尝试两次调用bootstrapApplication的方法行不通，因为每次调用都会创建一个独立的Angular应用实例，它们的依赖注入环境相互隔离，Msal的认证状态无法在两个实例间共享，所以重定向逻辑不会正常触发。

下面是两种可行的解决方案：

方案一：将MsalRedirectComponent嵌入根组件模板 #

这种方式最接近NgModule模式下的用法，只需两步：

1. 在main.ts中配置Msal提供者
   确保通过importProvidersFrom引入MsalModule并完成初始化配置，同时保留主应用的其他提供者：

   import { bootstrapApplication } from '@angular/platform-browser';
   import { AppComponent } from './app/app.component';
   import { importProvidersFrom } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app/app-routing.module';
   import { provideAnimations } from '@angular/platform-browser/animations';
   import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
   import { MsalModule } from '@azure/msal-angular';
   import { PublicClientApplication } from '@azure/msal-browser';
   
   bootstrapApplication(AppComponent, {
     providers: [
       importProvidersFrom(
         BrowserModule,
         AppRoutingModule,
         MsalModule.forRoot(
           new PublicClientApplication({
             auth: {
               clientId: '你的客户端ID',
               authority: 'https://login.microsoftonline.com/你的租户ID',
               redirectUri: window.location.origin
             }
           }),
           { interactionType: 'redirect' }
         )
       ),
       provideAnimations(),
       provideHttpClient(withInterceptorsFromDi())
     ]
   })
   .catch(err => console.error(err));
   

2. 在AppComponent模板中添加MsalRedirectComponent
   MsalRedirectComponent的选择器是msal-redirect，直接把它加到根组件的模板里即可：

   <!-- app.component.html -->
   <router-outlet></router-outlet>
   <msal-redirect></msal-redirect>
   

   这个组件会自动处理认证重定向的回调逻辑，无需额外代码。

方案二：手动调用MsalService处理重定向 #

如果你不想在模板中添加组件，可以在应用启动后，通过依赖注入获取MsalService并手动触发重定向处理：

bootstrapApplication(AppComponent, {
  // 此处保留之前的提供者配置（包括MsalModule）
})
.then(appRef => {
  const msalService = appRef.injector.get(MsalService);
  // 处理重定向回调
  msalService.handleRedirectObservable().subscribe({
    next: (authResult) => {
      if (authResult) {
        // 可选：处理认证成功后的逻辑，比如更新用户状态
      }
    },
    error: (err) => {
      console.error('重定向回调处理失败', err);
    }
  });
})
.catch(err => console.error(err));

两种方案都能保证Msal在同一个应用实例中运行，确保认证状态和重定向逻辑正常工作。

内容的提问来源于stack exchange，提问作者Dadv