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 angular/angular#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

[itsdevdom]

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?