Azure angular msal/browser package is opening blank popup when trying to log into teams

Question

I am using Angular 12. This uses 

"@azure/msal-angular": "^2.0.0"

 and

 "@azure/msal-browser": "^2.14.2",

 packages. This has been working fine for the last 2 years. Suddenly, one week ago, we are seeing that whenever we try connecting to teams from any browsers - Chrome, Edge or Firefox - a popup that opens is completely blank and nothing happens after that.

Even the url of the popup says blank

I have tried updating the msal-browser package to 2.38.3 and msal-angular package to 2.4.1. But even there the problem persists.

Here is the sample code for configuration:

private setPublicClientApplication(tenantId: string, appId: string): any {
    return new PublicClientApplication({
        auth: {
            `clientId: appId,`
            authority: `https://login.microsoftonline.com/${tenantId}`,
            `redirectUri: window.location.origin,
            postLogoutRedirectUri: window.location.origin,
            navigateToLoginRequestUrl: true`
        },
        cache: {
            cacheLocation: 'localStorage',
            `storeAuthStateInCookie`: false, // set to true for IE 11
        },
        system: {                    
            loggerOptions: {
               correlationId: '1234',
               loggerCallback: loggerCallback,
               `logLevel: LogLevel.Info`,
                piiLoggingEnabled: false // TODO: Need to verify 
            }
        }
    });        
}

Here is the sample code to login

login(popup?: boolean) {
    if (this.client) {          
        let request = {
            `scopes: ["user.read"],`               
            prompt: 'login'
        };

        if (popup) {
            this.client.loginPopup(request).subscribe(response => {
                this.client.instance.setActiveAccount(response.account);
                this.createGraphClient();
            });
        } else {
            this.client.loginRedirect(request);
        }
    }
}