Angular集成MSAL时出现NullInjectorError错误求助

错误信息 #

ERROR NullInjectorError: R3InjectorError(Environment Injector)[MsalService -> MsalService]: 
  NullInjectorError: No provider for MsalService!
    at NullInjector.get (core.mjs:1654:27)
    at R3Injector.get (core.mjs:3093:33)
    at R3Injector.get (core.mjs:3093:33)
    at ChainedInjector.get (core.mjs:15723:36)
    at lookupTokenUsingModuleInjector (core.mjs:5730:39)
    at getOrCreateInjectable (core.mjs:5778:12)
    at Module.ɵɵdirectiveInject (core.mjs:11050:19)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:12:26)
    at getNodeInjectable (core.mjs:5984:44)

项目依赖（package.json） #

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@azure/msal-angular": "^3.0.16",
    "@azure/msal-browser": "^3.13.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.4",
    "@angular/cli": "^17.3.4",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }

解决步骤 #

这个错误核心是MsalService未被注册到Angular依赖注入系统，按以下场景配置即可：

场景1：使用NgModule（传统模块式项目） #

在根模块app.module.ts中配置MsalModule并注册MsalService：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MsalModule, MsalService } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: '你的Azure AD客户端ID',
          authority: 'https://login.microsoftonline.com/你的租户ID',
          redirectUri: 'http://localhost:4200' // 匹配Azure AD配置的重定向URI
        }
      })
    )
  ],
  providers: [MsalService], // 必须添加这行，注册服务到DI系统
  bootstrap: [AppComponent]
})
export class AppModule { }

场景2：使用Standalone组件（Angular 17默认方式） #

在main.ts中通过bootstrapApplication配置MSAL并提供服务：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideMsal, MsalService } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideMsal(
      new PublicClientApplication({
        auth: {
          clientId: '你的Azure AD客户端ID',
          authority: 'https://login.microsoftonline.com/你的租户ID',
          redirectUri: 'http://localhost:4200'
        }
      })
    ),
    MsalService // 确保服务被注入
  ]
});

组件中正确注入MsalService #

在使用MsalService的组件（如app.component.ts）中，确保注入方式正确：

import { Component, inject } from '@angular/core';
import { MsalService } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 方式1：使用inject函数（Angular 14+推荐）
  private msalService = inject(MsalService);

  // 方式2：构造函数注入
  // constructor(private msalService: MsalService) {}
}

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