Angular切换@azure/msal-angular时遇NullInjectorError错误求助

错误原因 #

报错中的StsConfigLoader属于angular-auth-oidc-client库，和当前使用的@azure/msal-angular并非同一认证工具。这说明项目中仍残留旧OIDC库的依赖代码——比如你的AppConfigService还在注入OidcSecurityService，导致框架尝试加载该库的依赖却找不到对应的提供者。

解决步骤 #

• 清理旧OIDC库的残留依赖

  1. 卸载angular-auth-oidc-client依赖：

     npm uninstall angular-auth-oidc-client
     

  2. 全局搜索项目中的OidcSecurityService、StsConfigLoader、CheckAuthService等关键词，找到所有引用这些类的文件（比如AppConfigService），删除相关注入代码，替换为@azure/msal-angular的对应逻辑。
  3. 检查app.module.ts，移除所有和angular-auth-oidc-client相关的模块导入（比如OidcSecurityModule）。

• 确认MsalModule配置及依赖安装

  1. 确保已正确安装MSAL相关依赖：

     npm install @azure/msal-angular @azure/msal-browser
     

  2. 核对MsalModule.forRoot的配置细节：
     • authority需为Azure AD的正确租户地址，格式类似https://login.microsoftonline.com/你的租户ID
     • redirectUri要和Azure AD应用注册里配置的重定向URI完全一致
     • 确认isIE变量已正确定义（用于IE浏览器的兼容处理）

• 替换Auth相关业务逻辑
  把原来基于Auth0或旧OIDC库的认证逻辑，替换为MSAL的API：

  • 登录：使用MsalService的loginPopup()或loginRedirect()方法
  • 获取令牌：使用acquireTokenSilent()或acquireTokenPopup()方法
  • 路由保护：使用MsalGuard保护需要认证的路由

示例：将AppConfigService中的旧依赖替换为MsalService

// 替换前
import { OidcSecurityService } from 'angular-auth-oidc-client';

constructor(private oidcSecurityService: OidcSecurityService) {}

// 替换后
import { MsalService } from '@azure/msal-angular';

constructor(private msalService: MsalService) {}

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