Window Is Undefined When Used As Usevalue Provider With Angular 4 Aot

When Angular 4.0.2 application is compiled ahead-of-time, and the provider is defined as useValue import { OpaqueToken, Provider } from '@angular/core'; export const windowToken =

Solution 1:

I was having a similar problem but it was with a SignalrWindow. The concept and the error though was identical.

I then found this article here (https://blog.sstorie.com/integrating-angular-2-and-signalr-part-2-of-2/), and there were some comments at the bottom of the article that helped me solve the problem.

Basically, it boils done to using a factory method instead of a useValue in the providers. I'm not sure why it's a problem, but I do know that this approach solves the aot problem.

The steps to fix:

Create a function that is exported

exportfunctionwindowFactory(): any {
    returnwindow;
}

Then in the core module, in @NgModule in the providers you can do this:

...
providers: [
    { provide: SignalrWindow, useFactory: windowFactory }
  ]
...

Basically, you can rename the methods however you like (so, in your example it would be:)

exportconst windowProvider = { provide: windowToken, useFactory: windowFactory };

Solution 2:

During AoT compilation, angular CLI statically analyses code too generate ngmodule.factory file. It sees "useValue" and check if static value is available and puts it into ngmodule.factory. During compile time, this value is not available, so it leaves that provider value and hence, it is returned as "undefined" when injected into constuctor.

However, "useFactory" is provided for very same purpose where you don't know your value until runtime.

Due to this, useValue is not working in your scenario, but "useFactory" will work.

Bottom line: When AOT compilation, Use "useValue" only if you have static value like constant string or number. Else use "useFactory" to return run-time calculated object/values.