localStorage n'est pas défini (Angular Universal)

Je suis en utilisant universelle-démarreur comme l'épine dorsale.

Quand mon client commence, c'est lire un jeton sur les infos de l'utilisateur à partir de localStorage.

@Injectable()
export class UserService {
  foo() {}

  bar() {}

  loadCurrentUser() {
    const token = localStorage.getItem('token');

    //do other things
  };
}

Tout fonctionne bien, cependant j'ai obtenu ce dans le côté serveur (terminal) en raison d'un serveur de rendu:

EXCEPTION: ReferenceError: localStorage est pas défini

J'ai eu l'idée de ng-conf-2016-universel-modèles que l'utilisation de l'Injection de Dépendance pour les résoudre. Mais cette démo est vraiment vieux.

Dire que j'ai ces deux fichiers maintenant:

principal.du navigateur.ts

export function ngApp() {
  return bootstrap(App, [
    //...

    UserService
  ]);
}

principal.nœud.ts

export function ngApp(req, res) {
  const config: ExpressEngineConfig = {
    //...
    providers: [
      //...
      UserService
    ]
  };

  res.render('index', config);
}

Droit maintenant, ils utilisent les mêmes UserService. Quelqu'un peut-il donner quelques codes pour expliquer comment utiliser les différents Injection de Dépendance pour résoudre ce problème?

Si il y a une autre meilleure façon plutôt que de l'Injection de Dépendance, qui va être trop cool.


Mise à JOUR de 1 je suis en utilisant Angulaire 2 RC4, j'ai essayé @Martin. Mais même moi, je l'importer, il me donne toujours une erreur dans le terminal ci-dessous:

Terminal (mnp démarrer)

/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240
throw new reflective_exceptions_1.NoAnnotationError(typeOrFunc, params);
^ Erreur: Ne peut pas résoudre tous les paramètres pour "UserService'(Http, ?). Assurez-vous que tous les paramètres sont décorées avec Injecter ou
la validité des annotations de type et que "UserService' est décoré avec des
Injectable.

Terminal (mnp exécuter watch)

erreur TS2304: Impossible de trouver le nom de 'LocalStorage'.

Je suppose que c'est en quelque sorte double avec le LocalStorage de angular2-universal (bien que je ne suis pas à l'aide de import { LocalStorage } from 'angular2-universal';), mais même j'ai essayé de changer le mien pour LocalStorage2toujours pas de travail.

Et en attendant, mon IDE WebStorm montre aussi rouge:

localStorage n'est pas défini (Angular Universal)

BTW, j'ai trouvé un import { LocalStorage } from 'angular2-universal';mais vous ne savez pas comment l'utiliser.


Mise à JOUR 2je l'ai changé (pas sûr de savoir si il ya une meilleure façon):

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) {}  //<- this line is new

  loadCurrentUser() {
    const token = this.localStorage.getItem('token'); //here I change from `localStorage` to `this.localStorage`

    //…
  };
}

Cela résout le problème en UPADAT 1mais maintenant je l'ai eu d'erreur dans le terminal:

EXCEPTION: TypeError: ce.localStorage.getItem n'est pas une fonction

source d'informationauteur Hongbo Miao