angular-cli: IE11: ERROR TypeError: Unable to get property 'initialNavigation' of undefined or null reference

We also had the same problem. Looking at the RouterInitializer shows that the code is wrapped inside a Promise waiting for LOCATION_INITIALIZED.

So, changing the initializer in @JiriBalcar 's sample seems to fix it:

export function initializationFactory(curr: Http, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      curr.get('assets/test.json').subscribe(success => {
        console.log(success);
        console.log('INITIALIZATION: success');
        resolve(null);
      }, error => {
        console.error('INITIALIZATION:', error);
        resolve(null);
      });
    });
  });
}

(keep in mind to add the Injector dependency in the APP_INITIALIZER provider)

@thormentor: The workaround really is to just wrap the original APP_INITIALIZER-code inside a promise that waits for LOCATION_INITIALIZED. My code was based on this app.module from the sample-repository above.

To make it more clear my code from above with the relevant parts highlighted:

function appInitializer(injector: Injector, MaybeSomeOtherDependencies) {
  return () => new Promise( resolve => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
        
        // your app initializer code
        
    });
  });
}

Looking at your error-message you are probably just missing the new “Injector” dependency in the providers-definition:

  providers: [
      {
          provide: APP_INITIALIZER,
          useFactory: appInitializer,
          deps: [ Injector, MaybeSomeOtherDependencies ],
          multi: true
      }
  ],

@thormentor You are not resolving the promise. Try something like this:

locationInitialized.then(() => {
  localizationConfig.load()
    .then(() => resolve(null));
});

@alexeagle Here you go: git@github.com:JiriBalcar/issue5762.git. ng build --prod and try to open it in IE11

@paroe: Thanks for your quick reply, you’re right about the Injector dependency. I was missing that and that fix the errors. Now I’ve a new problem my application is constantly “Loading…” and I don have any error messages. Also the app stopped working on every browsers. I’m using the translation module l10n as a initializer. This is my code already changed:

import { Injectable, Injector } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { LocaleService, TranslationService } from 'angular-l10n';
import { LayoutDirection } from '../types';
import { LOCATION_INITIALIZED } from '@angular/common';

// Localization initialization.
@Injectable()
export class LocalizationConfigService {
  constructor(public locale: LocaleService,
              public translation: TranslationService) {
  }

  load(): Promise<any> {
    this.locale.addConfiguration()
      .addLanguages(['en', 'it', 'ar'])
      .setCookieExpiration(30)
      .defineDefaultLocale('en', 'US')
      .defineCurrency('USD')
      .defineLanguage('en');
    this.locale.init();

    this.translation.addConfiguration()
      .addProvider('./assets/locale-');

    let promise: Promise<any> = new Promise((resolve: any) => {
      this.translation.translationChanged.subscribe(() => {
        resolve(true);
      });
    });

    this.translation.init();
    return promise;
  }

  getLanguageDirection(language: string): LayoutDirection {
    return <LayoutDirection>this.locale.getLanguageDirection(language);
  }
}

export function initLocalization(injector: Injector, localizationConfig: LocalizationConfigService): Function {
  return () => new Promise( resolve => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      return () => localizationConfig.load();
    });
  });
}

Am I doing something wrong here?

I suspect that it’s the same root cause as https://github.com/angular/angular/issues/15501

@lpalli Workaround which is working for me is to disable aot in build which is enabled by default. Then my APP_INITIALIZER works fine in IE. You can do it by adding – aot false to the build command. e.g. ng build --prod --aot false