title: Angular 11: Problem at Msal Angular V2 package
body: <p>I have upgraded my angular project from v8 to v11.
  I have upgraded @azure/msal-angular package from V1 to V2(2.0.0-beta.3).
  I have followed the samples given on  <a href="https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app" rel="nofollow noreferrer">https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app</a>.</p>
  <p>The configuration done on Azure portal were working fine with the earlier version. This is a SSO App, there is no login button.</p>
  <ol>
  <li><p>App.module</p>
  <pre><code>const isIE = window.navigator.userAgent.indexOf(&quot;MSIE &quot;) &gt; -1 || 
   window.navigator.userAgent.indexOf(&quot;Trident/&quot;) &gt; -1;  
  
   export function loggerCallback(logLevel: LogLevel, message: string) {
     console.log(message);
   }
  
   export function MSALInstanceFactory(): IPublicClientApplication {
    return new PublicClientApplication({
     auth: {
            clientId: environment.clientId,
            authority: 
            `https://login.microsoftonline.com/${environment.tenantName}`,
             redirectUri: environment.redirectUrl
           },
    cache: {
            cacheLocation: BrowserCacheLocation.LocalStorage,
            storeAuthStateInCookie: isIE, 
           },
   system: {
     loggerOptions: {
               loggerCallback,
               logLevel: LogLevel.Info,
               piiLoggingEnabled: false
              }
        }
     });
   }
  
   export function MSALInterceptorConfigFactory(): 
    MsalInterceptorConfiguration {
       const protectedResourceMap = new Map&lt;string, Array&lt;string&gt;&gt;();
       protectedResourceMap.set(`${environment.clientId}`, 
       [`${environment.scopeUrl}`]);
  
    return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
  
  export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return {
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: [`${environment.scopeUrl}`]
      },
     };
    }
  
   providers: [
   {
     provide: HTTP_INTERCEPTORS,
     useClass: MsalInterceptor,
     multi: true
   },
   {
     provide: MSAL_INSTANCE,
     useFactory: MSALInstanceFactory
   },
   {
     provide: MSAL_GUARD_CONFIG,
     useFactory: MSALGuardConfigFactory
   },
   {
     provide: MSAL_INTERCEPTOR_CONFIG,
     useFactory: MSALInterceptorConfigFactory
   },
  </code></pre>
  </li>
  </ol>
  <p>App.component</p>
  <pre><code>ngOnInit(){
  
  this.msalBroadcastService.inProgress$
    .pipe(
      filter((status: InteractionStatus) =&gt; status === InteractionStatus.None),
      takeUntil(this._destroying$)
    )
    .subscribe(() =&gt; {
      this.checkAccount();
    }); 
  }
  
  
  
  setLoginDisplay() { 
      this.loginDisplay = this.authService.instance.getAllAccounts().length &gt; 0;
  
    }
  
    checkAccount() {
      this.loggedIn = this.authService.instance.getAllAccounts().length &gt; 0;
    }
  
    checkAndSetActiveAccount() { 
      let activeAccount = this.authService.instance.getActiveAccount();
  
      if (!activeAccount &amp;&amp; this.authService.instance.getAllAccounts().length &gt; 0) {
        let accounts = this.authService.instance.getAllAccounts();
        this.authService.instance.setActiveAccount(accounts[0]);
      }
    }
  
    login() {
      if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
        if (this.msalGuardConfig.authRequest) {
          this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
            .subscribe((response: AuthenticationResult) =&gt; {
              this.authService.instance.setActiveAccount(response.account);
            });
        } else {
          this.authService.loginPopup()
            .subscribe((response: AuthenticationResult) =&gt; {
              this.authService.instance.setActiveAccount(response.account);
            });
        }
      } else {
        if (this.msalGuardConfig.authRequest) {
          this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
        } else {
          this.authService.loginRedirect();
        }
      }
    }
  </code></pre>
  <p>environment</p>
  <pre><code>scopeUrl: &quot;api://xxxxxxx-xxxx-xxxx-a247-6023a95xxxxx/api&quot;,
    clientId: &quot;b4f868f3-xxxx-xxxx-xxxx-4d44f053ff29&quot;,
    tenantName: &quot;83993965-xxxx-xxxx-xxxx-d8259608fd30&quot;,
    scope: &quot;user.read&quot;,
    appUrl: &quot;http://localhost:4300/&quot;,
    location: &quot;localStorage&quot;,
    graphUrl: &quot;https://graph.microsoft.com/v1.0/me&quot;
  </code></pre>
  <p>But now the same configuration is not working with upgraded msal package.
  I am getting below error</p>
  <p>http Post Call :</p>
  <blockquote>
  <p><a href="https://login.microsoftonline.com/83993965-e753-xxxx-xxxx-d825960xxxx/oauth2/v2.0/token" rel="nofollow noreferrer">https://login.microsoftonline.com/83993965-e753-xxxx-xxxx-d825960xxxx/oauth2/v2.0/token</a></p>
  </blockquote>
  <p>Error Response :</p>
  <pre><code>error_codes: [7000218]
  error_description: &quot;AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'.
  ↵Trace ID: f0843107-bd57-4d08-b92e-15a873724e00
  ↵Correlation ID: 1764d345-xxxx-xxx-xxxx-20a9fda5bcb6
  ↵Timestamp: 2021-04-14 12:58:22Z&quot;
  error_uri: &quot;https://login.microsoftonline.com/error?code=7000218&quot;
  </code></pre>
  <p>Any help is appreciated</p>