angular - 类型 'MsalService' 上不存在属性

Question

我在尝试构建程序时遇到了一些问题。我开始在我的界面上实现 Azure AD 身份验证，并且它在本地运行良好。但是，我在部署时看到一些错误。感谢您的帮助!

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'.

这是我的导航栏 component.ts 代码:

import { Component, OnInit, OnDestroy, Inject, Input, Output, EventEmitter } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { Subject } from 'rxjs';

@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() { // Add log out function here
    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,
        RouterModule.forRoot(appRoutes, {useHash: true}),
        MsalModule.forRoot({
            auth: {
              clientId: 'xxxx', // Application (client) ID from the app registration
              authority: 'xxxx', // The Azure cloud instance and the app's sign-in audience (tenant ID, common, organizations, or consumers)
              redirectUri: redirectUri // This is your redirect URI
            },
            cache: {
                cacheLocation: 'localStorage',
                storeAuthStateInCookie: isIE,
              }
            })
          ],
    providers: [
        ...
        MsalService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
          }
    ]
})

export class AppModule {

}
 

还有我的 package.json:

{
  "name": "xxx",
  "version": "1.23.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod&& node versionManagement.js",
    "build:local": "ng build --prod",
    "test:w": "ng test --watch --browsers=Chrome --source-map=false",
    "test": "ng test --source-map=false --code-coverage --source-map=false",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/platform-server": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@azure/msal-angular": "^1.1.2",
    "@handlebars/allow-prototype-access": "^1.0.5",
    "@ng-bootstrap/ng-bootstrap": "2.0.0",
    "@popperjs/core": "^2.10.2",
    "angular-material-expansion-panel": "^0.7.2",
    "bootstrap": "4.0.0",
    "core-js": "2.6.12",
    "crypto-js": "^4.1.1",
    "font-awesome": "4.7.0",
    "handlebars": "^4.7.7",
    "jquery": "^3.6.0",
    "popper.js": "^1.14.3",
    "rxjs": "6.1.0",
    "rxjs-compat": "6.2.2",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "~6.2.9",
    "@compodoc/compodoc": "^1.1.18",
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/node": "6.0.60",
    "codelyzer": "^4.2.1",
    "jasmine-core": "2.99",
    "jasmine-spec-reporter": "~4.2.1",
    "karma-cli": "^2.0.0",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "1.2.0",
    "protractor": "5.1.2",
    "ts-node": "3.2.0",
    "tslint": "5.7.0",
    "typescript": "2.7.2"
  }
}

Answer 1

我遇到了同样的问题，这就是我所做的:

当我需要在某个组件中显示用户信息时，我会这样调用该信息:

this.authService.instance.getAllAccounts()[0]

例如，我有一个仪表板组件，在其中显示用户名:

ngOnInit(): void {
   this.user = this.authService.instance.getAllAccounts()[0].name
}

我一直在尝试在用户登录后立即分配此值，因此我不需要每次组件需要该信息时都进行此调用，但我不断收到相同的属性未定义错误。

希望有帮助。