How to inject window into a service?

by

This is working for me currently (2018-03, angular 5.2 with AoT, tested in angular-cli and a custom webpack build):

First, create an injectable service that provides a reference to window:

import { Injectable } from '@angular/core';

// This interface is optional, showing how you can add strong typings for custom globals.
// Just use "Window" as the type if you don't have custom global stuff
export interface ICustomWindow extends Window {
    __custom_global_stuff: string;
}

function getWindow (): any {
    return window;
}

@Injectable()
export class WindowRefService {
    get nativeWindow (): ICustomWindow {
        return getWindow();
    }
}

Now, register that service with your root AppModule so it can be injected everywhere:

import { WindowRefService } from './window-ref.service';

@NgModule({        
  providers: [
    WindowRefService 
  ],
  ...
})
export class AppModule {}

and then later on where you need to inject window:

import { Component} from '@angular/core';
import { WindowRefService, ICustomWindow } from './window-ref.service';

@Component({ ... })
export default class MyCoolComponent {
    private _window: ICustomWindow;

    constructor (
        windowRef: WindowRefService
    ) {
        this._window = windowRef.nativeWindow;
    }

    public doThing (): void {
        let foo = this._window.XMLHttpRequest;
        let bar = this._window.__custom_global_stuff;
    }
...

You may also wish to add nativeDocument and other globals to this service in a similar way if you use these in your application.

edit:
Updated with Truchainz suggestion.
edit2:
Updated for angular 2.1.2
edit3:
Added AoT notes
edit4:
Adding any type workaround note
edit5: Updated solution to use a WindowRefService which fixes an error I was getting when using previous solution with a different build
edit6: adding example custom Window typing

More Related Contents:

  1. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  2. How do I share data between components in Angular 2?
  3. Read response headers from API response – Angular 5 + TypeScript
  4. How to dynamically add a directive?
  5. How to get query parameters from URL in Angular 5?
  6. angular 2 sort and filter
  7. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  8. Angular2 – FormControl Validation on blur
  9. Emit event from parent to child
  10. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  11. No provider for AngularFireDatabase, AngularFireAuth
  12. Multiple canActivate guards all run when first fails
  13. TS2531: Object is possibly ‘null’
  14. Custom ExceptionHandler change detection lag
  15. Trigger update of component view from service – No Provider for ChangeDetectorRef
  16. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  17. Pass parameter into route guard
  18. Typescript dependency injection public vs private
  19. Rxjs Retry with Delay function
  20. What is the meaning of question mark in expressions in Angular 2?
  21. Merging http observables using forkjoin
  22. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. How to return observable from subscribe
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment