Automatically select identity provider by setting idpHint in Angular

Hi,
I am integrating keycloak with Angular 8. I have came across the documentation and successfully created identity provider (Microsoft) and its working. I need application to automatically select identity provider by given idp alias as my plan is to create more identity provider for single realm. The problem is, when I try to configure keycloak.login({idpHint:‘Microsoft’}) it returns error as “Cannot read property ‘login’ of undefined”. I am not sure my syntax is correct. I searched for the support and couldn’t find any solution. My current code is giving below. Please identify the mistake and give support.
Thank you in advance.

keycloak.init.ts

import { KeycloakService } from ‘keycloak-angular’;
import { environment } from ‘…/…/…/environments/environment’;
export function initializer(keycloak: KeycloakService): () => Promise {
return (): Promise => {
return new Promise(async (resolve, reject) => {
try {
await keycloak.login({idpHint:‘microsoft’});
await keycloak.init({
config: {
url: environment.keycloak.issuer,
realm: environment.keycloak.realm,
clientId: environment.keycloak.clientId,
“credentials”: {
“secret”: “XXXXXXXXXXXxxxxxXXXXXxxx”
}
},
loadUserProfileAtStartUp: false,
initOptions: {
onLoad: ‘login-required’,
checkLoginIframe: false,
},
bearerExcludedUrls: []
});
resolve();
} catch (error) {
reject(error);
}
});
};
}

app.module.ts

@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
KeycloakAngularModule
],
providers: [
{ provide: APP_INITIALIZER, useFactory: initializer, multi: true, deps: [KeycloakService], },
],
bootstrap: [AppComponent]
})

export class AppModule { }