Angular-auth-oidc-client: IE11 compatibility

[Lempkin]

Hi,

When testing on ie11 I got following error :

Unhandled Promise rejection: « fetch » is not defined ; Zone: ; Task: Promise.then ; Value: ReferenceError: « fetch » is not defined ReferenceError: « fetch » is not defined

[damienbod]

@Lempkin This looks like a problem. Workaround:

Create you own init service, add replace the fetch with a IE11 javascript http get.

import { Injectable, EventEmitter, Output } from '@angular/core';

@Injectable()
export class AppConfigService {
    @Output() onConfigurationLoaded = new EventEmitter<boolean>();
    clientConfiguration: any;
    wellKnownEndpoints: any;

    constructor() { }

    async load(configUrl: string) {
        const response = await fetch(configUrl);
        this.clientConfiguration = await response.json();
        await this.load_using_stsServer(this.clientConfiguration.urlStsServer);
    }

    async load_using_stsServer(stsServer: string) {
        const response = await fetch(`${stsServer}/.well-known/openid-configuration`);
        this.wellKnownEndpoints = await response.json();
        this.onConfigurationLoaded.emit();
    }
}

Then use it in your module setup:

import {
    AuthModule,
    OidcSecurityService,
    OpenIDImplicitFlowConfiguration,
    AuthWellKnownEndpoints
} from 'angular-auth-oidc-client';
import { AppConfigService } from './app.config.service';


export function loadConfig(appConfigService: AppConfigService) {
    console.log('APP_INITIALIZER STARTING');
    console.log(window.location.origin + '/api/ClientAppSettings');
    return () => appConfigService.load(window.location.origin + '/api/ClientAppSettings');
}


    providers: [
        OidcSecurityService,
        AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [AppConfigService],
            multi: true
        },
        ...
    ],

export class AppModule {

    constructor(
        private oidcSecurityService: OidcSecurityService,
        private appConfigService: AppConfigService,
    ) {
        this.appConfigService.onConfigurationLoaded.subscribe(() => {
...

[Lempkin]

I cannot use http.get as I got a :

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

[damienbod]

@Lempkin You need to add it to the deps in the provider

[Lempkin]

@damienbod , Thx for your answer, I have :
AppConfig,
{
provide: APP_INITIALIZER,
useFactory: loadConfig,
deps: [AppConfig, Http],
multi: true
},

And still have the error above (cyclic dependency)

[Lempkin]

Finally I've used https://www.npmjs.com/package/isomorphic-fetch, this fix the problem

[damienbod]

@Lempkin thanks for the info, I'll add this to the docs, unless you would like to do a PR?

Greetings Damien

[larsalmen]

Just something that might help others, just like Lempkin said, install https://www.npmjs.com/package/isomorphic-fetch with 'npm install --save isomorphic-fetch es6-promise' and simply add 'import "isomorphic-fetch";' to your polyfills.ts file to fix this.

[damienbod]

Added to the readme, thanks for reporting.