localStorage is not defined (Angular Universal)
<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>