title: localStorage is not defined (Angular Universal)
body: <p>I am using <a href="https://github.com/angular/universal-starter" rel="noreferrer">universal-starter</a> as backbone.</p>
  
  <p>When my client starts, it read a token about user info from localStorage.</p>
  
  <pre><code>@Injectable()
  export class UserService {
    foo() {}
  
    bar() {}
  
    loadCurrentUser() {
      const token = localStorage.getItem('token');
  
      // do other things
    };
  }
  </code></pre>
  
  <p>Everything works well, however I got this in the <strong>server side</strong> (terminal) because of server rendering:</p>
  
  <blockquote>
    <p>EXCEPTION: ReferenceError: localStorage is not defined</p>
  </blockquote>
  
  <p>I got the idea from <a href="https://github.com/gdi2290/ng-conf-2016-universal-patterns/tree/master/3-di-demo" rel="noreferrer">ng-conf-2016-universal-patterns</a> that using Dependency Injection to solve this. But that demo is really old.</p>
  
  <p>Say I have these two files now:</p>
  
  <p><strong>main.broswer.ts</strong></p>
  
  <pre><code>export function ngApp() {
    return bootstrap(App, [
      // ...
  
      UserService
    ]);
  }
  </code></pre>
  
  <p><strong>main.node.ts</strong></p>
  
  <pre><code>export function ngApp(req, res) {
    const config: ExpressEngineConfig = {
      // ...
      providers: [
        // ...
        UserService
      ]
    };
  
    res.render('index', config);
  }
  </code></pre>
  
  <p>Right now they use both same UserService. Can someone give some codes to explain how to use different Dependency Injection to solve this?</p>
  
  <p>If there is another better way rather than Dependency Injection, that will be cool too.</p>
  
  <hr>
  
  <p><strong>UPDATE 1</strong> I am using Angular 2 RC4, I tried @Martin's way. But even I import it, it still gives me error in the terminal below:</p>
  
  <p><strong>Terminal (npm start)</strong></p>
  
  <blockquote>
    <p>/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240
            throw new reflective_exceptions_1.NoAnnotationError(typeOrFunc, params);
            ^ Error: Cannot resolve all parameters for 'UserService'(Http, ?). Make sure that all the parameters are decorated with Inject or
    have valid type annotations and that 'UserService' is decorated with
    Injectable.</p>
  </blockquote>
  
  <p><strong>Terminal (npm run watch)</strong></p>
  
  <blockquote>
    <p>error TS2304: Cannot find name 'LocalStorage'.</p>
  </blockquote>
  
  <p>I guess it is somehow duplicated with the <code>LocalStorage</code> from <code>angular2-universal</code> (although I am not using <code>import { LocalStorage } from 'angular2-universal';</code>), but even I tried to change mine to <code>LocalStorage2</code>, still not work.</p>
  
  <p>And in the meanwhile, my IDE WebStorm also shows red:</p>
  
  <p><a href="https://i.stack.imgur.com/qKzbs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qKzbs.png" alt="enter image description here"></a></p>
  
  <p>BTW, I found a <code>import { LocalStorage } from 'angular2-universal';</code>, but not sure how to use that.</p>
  
  <hr>
  
  <p><strong>UPDATE 2</strong>, I changed to (not sure whether there is a better way):</p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import { Http } from '@angular/http';
  import { LocalStorage } from '../../local-storage';
  
  @Injectable()
  export class UserService {
    constructor (
      private _http: Http,
      @Inject(LocalStorage) private localStorage) {}  // &lt;- this line is new
  
    loadCurrentUser() {
      const token = this.localStorage.getItem('token'); // here I change from `localStorage` to `this.localStorage`
  
      // …
    };
  }
  </code></pre>
  
  <p>This solves the issue in <strong>UPADAT 1</strong>, but now I got error in the terminal:</p>
  
  <blockquote>
    <p>EXCEPTION: TypeError: this.localStorage.getItem is not a function</p>
  </blockquote>