MsalService无getAccount等属性，Angular项目部署TS2339报错求助

本地运行正常，但执行部署构建时出现以下TypeScript错误：

src/app/nav-bar/nav-bar.component.ts(25,46): error TS2339: Property 'getAccount' does not exist on type 'MsalService'.
src/app/nav-bar/nav-bar.component.ts(30,22): error TS2339: Property 'logout' does not exist on type 'MsalService'.
src/app/nav-bar/nav-bar.component.ts(34,42): error TS2339: Property 'getAllAccounts' does not exist on type 'MsalService'.

相关代码片段 #

NavBar组件代码 #

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

@Component({
    selector: 'app-nav-bar',
    templateUrl: './nav-bar.component.html',
    styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent {
    @Input() public pageName: string;
    @Input() public loguser: string;
    public loginUser: any; 
    @Input() public name: string;

    constructor(private authService: MsalService) { }
  
    public loginDisplay = false;

    loggedUser() {
        return this.loginUser = this.authService.getAccount();
    }

    public logout() {
        this.authService.logout('http://localhost:4200');
    }

    setLoginDisplay() {
        this.loginDisplay = this.authService.getAllAccounts().length > 0;
    }
}

简化的app.module.ts #

...
import {NavBarComponent} from './nav-bar/nav-bar.component';
import { MsalModule, MsalInterceptor, MsalService } from '@azure/msal-angular';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
const currentUrl = new URL(window.location.href)
const redirectUri = currentUrl.origin + currentUrl.pathname

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        ...
        NavBarComponent,
    ],
    imports: [
        ...
        NgbModule.forRoot(),
        RouterModule.forRoot(appRoutes, {useHash: true}),
        MsalModule.forRoot({
            auth: {
                clientId: 'xxxx',
                authority: 'xxxx',
                redirectUri: redirectUri
            },
            cache: {
                cacheLocation: 'localStorage',
                storeAuthStateInCookie: isIE,
            }
        })
    ],
    providers: [
        ...
        MsalService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        }
    ]
})
export class AppModule { }

package.json核心依赖片段 #

{
  "dependencies": {
    "@angular/core": "^6.1.0",
    "@azure/msal-angular": "^1.1.2",
    ...
  },
  "devDependencies": {
    "typescript": "2.7.2",
    ...
  }
}

解决方案 #

问题根源在于你使用的**@azure/msal-angular 1.x版本**中，MsalService本身并不直接暴露getAccount、logout、getAllAccounts这些方法，这些方法实际存在于MsalService内部的instance属性（MSAL核心的PublicClientApplication实例）中。本地运行时可能因类型检查宽松未触发错误，但生产构建时严格的类型校验会抛出异常。

1. 修正组件中的方法调用 #

修改NavBarComponent中的三个方法，改为通过instance属性调用：

loggedUser() {
    return this.loginUser = this.authService.instance.getAccount();
}

public logout() {
    // v1.x中logout方法接受配置对象，而非直接传URL
    this.authService.instance.logout({ 
        postLogoutRedirectUri: 'http://localhost:4200' 
    });
}

setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
}

2. 清理依赖并重新安装 #

避免缓存的类型定义导致问题：

rm -rf node_modules package-lock.json
npm install

3. 重新执行构建 #

npm run build

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