Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
148 lines (123 sloc) 3.8 KB

+++ title = "Access to global variables in Angular 2" date = "2016-10-04T10:24:38+09:00"


Don’t use window directly.

Angular 2 has an ability to develop an application in cross-platform because it doesn’t depend on DOM. But it’s breakable easily. If you use window,document or anything browser-specific, then of course your app will lose the ability.

We often use window instance to get and set global variables. In browser platform, window is a single global context object. In the other side, Node.js environment provides a global context as global. To make our app platform-agnostic, we must absorb the difference. Don’t worry. Already we have a powerful stuff for that.

Dependency injection.

Define a global variable

Prepare a global variable foo as example.

    window.DATA = {
      foo: 'bar'

Declare global type

First, we should declare our global type as an interface. In this case, global type has only foo string field.

export interface MyGlobal {
  foo: string;

Create GlobalRef class

This is a hero of this story. GlobalRef is an abstract class to access to the global object. It has only one nativeGlobal getter. (consistent with ElementRef#nativeElement.)

export abstract class GlobalRef { 
  abstract get nativeGlobal(): MyGlobal;

Create platform-specific classes

GlobalRef class is just a placeholder. Let’s make platform-specific classes by extending GlobalRef.

export class BrowserGlobalRef extends GlobalRef {
  get nativeGlobal(): MyGlobal { return window as MyGlobal; }
export class NodeGlobalRef extends GlobalRef {
  get nativeGlobal(): MyGlobal { return global as MyGlobal; }

Provide GlobalRef

We must provide the classes. Let’ create SharedModule and define SharedModule.forBrowser() and SharedModule.forNode().

import { NgModule, ModuleWithProviders } from '@angular/core';
import { GlobalRef, BrowserGlobalRef, NodeGlobalRef } from './global-ref';
export class SharedModule {
  static forBrowser(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        { provide: GlobalRef, useClass: BrowserGlobalRef }
  static forNode(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        { provide: GlobalRef, useClass: NodeGlobalRef }

And use them in BrowserAppModule and NodeAppModule.

  imports: [ BrowserModule, SharedModule.forBrowser() ],
  declarations: [ App ],
  bootstrap: [ App ]
export class BrowserAppModule {
  imports: [ BrowserModule, SharedModule.forNode() ],
  declarations: [ App ],
  bootstrap: [ App ]
export class NodeAppModule {


Bootstrapping must be separated for each platform. Following is for only browser.

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppBrowserModule} from './app';
Use `GlobalRef` in components
All done! Lets use `GlobalRef` and access to global variables.
import {GlobalRef} from './global-ref';
  selector: 'my-app',
  template: `
      <pre>{{ data | json }}</pre>
export class App {
  data: any;
  constructor(_global: GlobalRef) { = _global.nativeGlobal.DATA;



  • Don’t access to window as global context
  • Wrap the context and absorb the difference among platforms
  • Use dependency injection and NgModule

Note: I never recommend you to use global variables. This is a small tip to tackle the real world… Good luck!