Angular msal doesn't work with https protocol

I'm trying to use angular msal in my project, when i use the standard http protocol it works as i expected but when i try to use https doesn't work the same way. I have used this tutorial https://www.section.io/engineering-education/how-to-get-ssl-https-for-localhost/ to create an auto-signed certificate to be able to run angular with https like https://localhost:4200 and i change the url on azure aplication to https://localhost:4200 as well.

My app.module.ts

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'my-client-id',
      redirectUri: 'https://localhost:4200',
      postLogoutRedirectUri: 'https://localhost:4200'
    },
    cache:{
      cacheLocation: BrowserCacheLocation.LocalStorage,
    }
  },
  )
}

My signin.component.ts

      this.msalService.instance.handleRedirectPromise().then(
        res => {
          if(res != null && res.account != null){
            this.msalService.instance.setActiveAccount(res.account)
            if(!isAuthenticated){
              this.azureSignIn(res.account)
            }
          }
        }

      )

When i try to login with angular running on https, after de login redirect the res come as null and in the browser console i get this error "Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type."