title: Angular 4: global variable is undefined
body: <p>I use <strong>Angular ^4.2.4</strong>.</p>
  
  <p>Need global function <strong>range</strong> for all components:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class Global {
  
    range:object = function(n:number){
  
      var vs = [];
  
      for( var i=0; i &lt; n; i++ )
        vs.push(i);
  
      return vs;
    }
  }
  </code></pre>
  
  <p>Component example of root:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Global } from "./global";
  
  @Component({
    selector: 'app-root'
    ,templateUrl: '&lt;ul&gt;&lt;li *ngFor="let i of global.range(5)"&gt;{{i}}&lt;/li&gt;&lt;/ul&gt;'
    ,providers: [ Global ]
  })
  export class AppComponent {
    constructor( public global: Global ){}
  }
  </code></pre>
  
  <p>But console log is:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'range' of undefined
      at Object.eval [as updateDirectives] (AppHome.ngfactory.js:19)
      at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
      at checkAndUpdateView (core.es5.js:12245)
      at callViewAction (core.es5.js:12610)
      at execComponentViewsAction (core.es5.js:12542)
      at checkAndUpdateView (core.es5.js:12251)
      at callViewAction (core.es5.js:12610)
      at execEmbeddedViewsAction (core.es5.js:12568)
      at checkAndUpdateView (core.es5.js:12246)
      at callViewAction (core.es5.js:12610)
  </code></pre>
  
  <p>That <a href="https://stackoverflow.com/questions/43991306/angular-4-global-variables">instruction</a> don't work for me...</p>