PopupRequest Typescript error in Chapter2 TodoListSPA app

[kdowswell]

This issue is for a: (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

download repo cd to repo directory cd to Chapter2/TodoListSPA npm i ng serve

Any log messages given by the failure

src/app/app.component.ts:58:40 - error TS2345: Argument of type '{ prompt?: string | undefined; authority?: string | undefined; correlationId?: string | undefined; claims?: string | undefined; resourceRequestMethod?: string | undefined; resourceRequestUri?: string | undefined; ... 10 more ...; scopes?: string[] | undefined; } | { ...; }' is not assignable to parameter of type 'RedirectRequest | undefined'.
  Type '{ prompt?: string | undefined; authority?: string | undefined; correlationId?: string | undefined; claims?: string | undefined; resourceRequestMethod?: string | undefined; resourceRequestUri?: string | undefined; ... 10 more ...; scopes?: string[] | undefined; }' is not assignable to type 'RedirectRequest'.
    Type '{ prompt?: string | undefined; authority?: string | undefined; correlationId?: string | undefined; claims?: string | undefined; resourceRequestMethod?: string | undefined; resourceRequestUri?: string | undefined; ... 10 more ...; scopes?: string[] | undefined; }' is not assignable to type '{ scopes: string[]; redirectStartPage?: string | undefined; onRedirectNavigate?: ((url: string) => boolean | void) | undefined; }'.
      Types of property 'scopes' are incompatible.
        Type 'string[] | undefined' is not assignable to type 'string[]'.
          Type 'undefined' is not assignable to type 'string[]'.

58         this.authService.loginRedirect({...this.msalGuardConfig.authRequest});

Expected/desired behavior

Browser and version?

Versions

Mention any other details that might be useful

I'm assuming this is due to an update to the typescript definition for PopupRequest in the msal-browser package. I'm new to this though and am having trouble figuring out what the solution is.

---

Thanks! We'll be in touch soon.

[derisen]

@kdowswell you're right, this due to updates on type definitions. Please modify your app.component.ts as follows:

import { PopupRequest, RedirectRequest } from '@azure/msal-browser';

// ...

login() {
  if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest)
        .subscribe(() => this.checkAccount());
      } else {
        this.authService.loginPopup()
          .subscribe(() => this.checkAccount());
    }
  } else {
    if (this.msalGuardConfig.authRequest){
      this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }
}

I'll make a PR to update these soon (you're welcome to propose a PR as well).

[kdowswell]

Great, this resolved my issue!