VS 2017 Angular模板集成MSAL ADB2C遇阻，求解决方案

看起来你在VS2017的Angular模板里踩了不少和VS Code项目不一样的坑，我来帮你逐个拆解解决：

问题1：CDN引入+any声明导致"window is undefined" #

这个错误的核心原因是Angular在初始化阶段（尤其是服务端渲染或启动时），window对象还未被浏览器环境初始化，而VS2017的Angular模板默认可能带有SSR相关配置，或者你的代码在组件/服务的constructor里直接访问了window.msal。

解决步骤：

• 确保MSAL初始化代码只在浏览器环境中执行：
  1. 导入Angular的平台判断工具：

     import { Inject, PLATFORM_ID } from '@angular/core';
     import { isPlatformBrowser } from '@angular/common';
     

  2. 在组件的ngAfterViewInit钩子（而非constructor）中初始化MSAL，或者在服务中注入平台信息做判断：

     constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
     
     ngAfterViewInit() {
       if (isPlatformBrowser(this.platformId)) {
         // 这里初始化MSAL实例
         const msalInstance = new window.msal.UserAgentApplication({
           auth: {
             clientId: '你的B2C客户端ID',
             authority: 'https://你的租户.b2clogin.com/你的租户.onmicrosoft.com/你的用户流'
           }
         });
       }
     }
     

• 若使用AOT编译，直接声明window.msal为any可能不够，建议在src/typings.d.ts中添加全局类型声明：

  declare interface Window {
    msal: any;
  }
  

问题2：通过npm install msal安装后的集成问题 #

VS2017的Angular模板通常自带的Angular版本偏旧（比如5.x或6.x），而最新的@azure/msal-angular要求Angular 12+，所以你需要安装适配旧版本的MSAL包：

• 针对Angular 5/6，安装1.x版本的MSAL：

  npm install msal@1.4.12 @azure/msal-angular@1.1.2 --save
  

• 按旧版本配置方式完成集成：
  1. 在app.module.ts中导入并配置MsalModule：

     import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
     import { HTTP_INTERCEPTORS } from '@angular/common/http';
     
     @NgModule({
       imports: [
         MsalModule.forRoot({
           auth: {
             clientId: '你的B2C客户端ID',
             authority: 'https://你的租户.b2clogin.com/你的租户.onmicrosoft.com/你的用户流',
             validateAuthority: false
           },
           cache: {
             cacheLocation: 'localStorage',
             storeAuthStateInCookie: true // 适配旧浏览器或SSR场景
           }
         })
       ],
       providers: [
         {
           provide: HTTP_INTERCEPTORS,
           useClass: MsalInterceptor,
           multi: true
         }
       ]
     })
     export class AppModule { }
     

  2. 在需要登录的组件中注入MsalService实现登录逻辑：

     import { MsalService } from '@azure/msal-angular';
     
     constructor(private msalService: MsalService) {}
     
     login() {
       this.msalService.loginRedirect({
         scopes: ['openid', 'profile', 'https://你的租户.onmicrosoft.com/你的API/access_as_user']
       });
     }
     
     isLoggedIn(): boolean {
       return this.msalService.getAccount() != null;
     }
     

额外提示：VS2017的Angular模板可能存在默认webpack配置或polyfill缺失的情况，如果遇到模块解析错误，可以检查polyfills.ts，确保添加了必要的polyfill（比如core-js/es6/reflect、core-js/es7/reflect），或者调整tsconfig.json中的target为es6及以上。

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