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

[xouqoa]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

### Versions.

@angular/cli: 1.0.0
node: 7.7.1
os: win32 x64
@angular/cli: 1.0.0
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/compiler-cli: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1

### Repro steps.

I'm not entirely sure how to reproduce this. I'm running into it only in IE11 when running "ng build --prod". If I run "ng build --dev" everything works fine.

### The log given by the failure.

ERROR Error: Uncaught (in promise): TypeError: Unable to get property 'initialNavigation' of undefined or null reference
TypeError: Unable to get property 'initialNavigation' of undefined or null reference
at t.prototype.isLegacyDisabled (https://developer20/cfw/javascripts/learner/vendor.bundle.js:407:2551)
at Anonymous function (https://developer20/cfw/javascripts/learner/vendor.bundle.js:407:1511)
at n.prototype.invoke (https://developer20/cfw/javascripts/learner/polyfills.bundle.js:36:9782)
at onInvoke (https://developer20/cfw/javascripts/learner/vendor.bundle.js:316:8090)
at n.prototype.invoke (https://developer20/cfw/javascripts/learner/polyfills.bundle.js:36:9782)
at t.prototype.run (https://developer20/cfw/javascripts/learner/polyfills.bundle.js:36:5065)
at Anonymous function (https://developer20/cfw/javascripts/learner/polyfills.bundle.js:36:2119)
at n.prototype.invokeTask (https://developer20/cfw/javascripts/learner/polyfills.bundle.js:36:10439)

### Mention any other details that might be useful.

I'm not sure how to create a scenario where this can be reproduced easily, but I'm open to doing so if somebody can give me an idea of how to do it.

[Nehmiabm]

The exact same thing is happening to me in IE 10 and above. The error does not display when running the app using 'ng serve'. But if I run it using 'ng build --prod' it shows exact error as listed above.

[KeithRaven]

I've also been having this same issue in both @angular 4.0.0 and 4.0.1 (previously I was on 2.4.5 which was working)

[xouqoa]

I've also been having this same issue in both @angular 4.0.0 and 4.0.1 (previously I was on 2.4.5 which was working)

Yeah, this definitely started after we upgraded to Angular 4.0 and CLI 1.0. It is possible it is an Angular issue, but I figured I would start here since it only happens with the --prod flag.

[Nehmiabm]

I'm on Angular version 4.0.0 as well

[chriet]

Same issue here with angular 4.0.1 and CLI 1.0.0. In my case it happens when using an APP_INITIALIZER, and also only in production mode (running ng serve -prod) and not in developer mode.

[fulls1z3]

It happens at me too, both on 4.0.0 and 4.0.1, using IE11.

[KeithRaven]

This does seem to relate to how you use APP_INITIALIZER which I introduced at the point of updating to 4.0.0.

In my case I've been able to resolve the error by removing the following from my modules providers: { provide: ConfigService, useFactory: configServiceFactory }

and moving the functionality from configServiceFactory into my APP_INITIALIZER useFactory. I then tried altering my APP_INITIALIZER factory a bit and got the same error again, so it's pretty sensitive to what you to at this point.

The following post was helpful https://github.com/angular/angular/issues/14459 as the root of the error above comes from this.injector.get(ROUTER_CONFIGURATION) in router_module.ts returning undefined in IE (when debugging against the compiled version).

[Kanishkaz]

Exactly same issue after upgrading to angular 4.0.0. It's definitely related to the APP_INITIALIZER. I got my code working by moving the initialiser code to the ngmodule constructor. However this is not ideal as the initialiser code doesn't finish prior to root view rendering. In the end I downgraded to angular 2.4.

[JiriBalcar]

@Brocco @hansl Hi could you please take a look at this issue? This is kind of blocker. Thanks

[dominique-mueller]

Same here, using Angular 4 and Angular CLI 1.

[lpalli]

I'm using APP_INITIALIZER to load my application configuration using a service from an asset json file before the application start. I use APP_INITIALIZER while the configuration must be available to allow other services to run correctly.

The application is based on the last angular versions (angular 4.0.1 and angular-cli 1.0.0).

All work fine in DEV mode and PROD mode and differentiates browser but the PROD mode on IE11 return the error Unable to get property 'initialNavigation' of undefined or null reference too...

Any idea for a workaround? For now the only solution I founded is to integrate the configuration in the application code but it isn't a really solution :-(

[JiriBalcar]

@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

[lpalli]

@JiriBalcar Thanks for your workaround, maybe disabling AOT is not the best solution for performances but I can keep my actual configuration service and wait the solution of this issue...

Somebody is working to solve it? We must report it in another project? (I'm not sure it's really an angular-cli issue)

[JiriBalcar]

@lpalli Yes I know that it is not ideal and should be temporary. Maybe @alexeagle could help if it is aot compiler issue?

[jcimoch]

I have exactly the same issue, I use APP_INITIALIZER to provide service which loads the dynamic app translations from json, therfore bootstraping process waits for this dependency to resolve first. However when generating prod build with AOT, IE 11 is unable to bootstrap the app with error described in this issue :( Any workarounds solutions?

[alexeagle]

Could someone affected by the issue please give a repro? That reduces the time needed to investigate - thanks!

[JiriBalcar]

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

[vicb]

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

[fulls1z3]

Hi @alexeagle, and I hereby share some useful links as repro:

https://github.com/nglibs/example-app

• npm run build:prod
• npm run serve

or directly try to open the deployed site on IE11 http://nglibs-example-app.azurewebsites.net/en

[panglat]

I have the same issue. But I moved APP_INITIALIZER code (I use it to load a config file) to a fresh project created with angular-cli 1.0.0, and it works (I have to update the polyfills file). Then, I tried to update the project file following https://github.com/angular/angular-cli/wiki/stories-1.0-update tutorial, but it is still failing. :(

[adjiandov]

I am having the same issue when building AOT. And this also occured after I updated to angular4. I am using angular/cli and I need to build AOT, since I am also using i18n, and for now the translations/localization of an angular/cli based app with i18n is possible only when building AOT.

Is there any resolution to this issue?

Thanks :)

[paroe]

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)

[aguacongas]

@paroe I confirm. It works for me too

[xouqoa]

@paroe Thanks, refactoring our initialization factory like your example also worked for me. Should be a good workaround until the underlying cause is fully diagnosed/fixed.

[filipesilva]

This seems to be a bug in angular/angular being tracked in https://github.com/angular/angular/issues/15501.

[thormentor]

Hi @paroe I'm having the same problem but I don't understand your fix. What are your changes? When I try your fix in my code everything I get are this kind of errors:

• ERROR TypeError: Cannot read property 'get' of undefined

• Unhandled Promise rejection: Cannot read property 'get' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'get' of undefined

Clearly I don't know what i'm doing, can you give me some directions to solve this.

[paroe]

@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]

@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?

[paroe]

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

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

[thormentor]

@paroe Thank you soo much, that solve all my problems.

[Nehmiabm]

@paroe The work around worked for me with command ng build --prod on IE11. Thank you very much.

[diloidroj]

@paroe I confirm. It works for me too

[adamdport]

I had a similar issue, only it was http that was undefined (not injected in time). Also, running it in --prod mode seemed to resolve the issue for me. Including the es6 function polyfill seemed to resolve the issue for me:

import 'core-js/es6/function';

but I'm not sure why

1. it would work for some people on my team or
2. why it would work with the production flag

[legolas]

Thank you @paroe your solution/workaround helped me out!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}