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

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.
36 Answers

✔️Accepted Answer

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)

Other Answers:

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

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

image

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

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

More Issues: