Angular 6 injecting window token in library service

Question

I have a library that has the code from this website post: https://brianflove.com/2018/01/11/angular-window-provider/

In my library, I also have a service where I want to have access to the window object. However, adding in the following to the constructor is not working:

@Inject(WINDOW) private window: Window

When trying to build the library with the cli, the following error occurs:

Metadata collected contains an error that will be reported at runtime: Could not resolve type Window.

I can change it to use the type any rather than Window, or add @dynamic as a comment and it does then build OK. Is there a better way of doing this?

I'm not sure if this is even the right way to do it, as it also relies on the consumer to have set WINDOW_PROVIDERS in its main app module providers array.

Answer 1

I am using the same service and I'm injecting it like this:

@Inject(WINDOW) private _window: Window

Notice the underscore ('_') character in front of the window variable. I suspect you cannot name a variable window, because this would clash with the built-in browser window object. Other than that, make sure that you are importing the injection token in your component/service as such:

import { WINDOW } from '[path to your services]/window.service';

And in you app.module.ts (or whatever module you're using it in):

import { WINDOW_PROVIDERS } from '[path to your services]/window.service';
...
  providers: [
    WINDOW_PROVIDERS
  ]
...