angular - localStorage 未定义(Angular Universal)

Question

我正在使用 universal-starter作为 Backbone 。

当我的客户端启动时，它会从 localStorage 中读取有关用户信息的 token 。

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

  bar() {}

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

    // do other things
  };
}

一切正常，但是由于服务器渲染，我在服务器端(终端)得到了这个:

EXCEPTION: ReferenceError: localStorage is not defined

我的想法来自 ng-conf-2016-universal-patterns使用依赖注入(inject)来解决这个问题。但是那个演示真的很老。

假设我现在有这两个文件:

ma​​in.broswer.ts

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

    UserService
  ]);
}

ma​​in.node.ts

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

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

现在他们使用相同的 UserService。有人可以提供一些代码来解释如何使用不同的依赖注入(inject)来解决这个问题吗？

如果有其他比依赖注入(inject)更好的方法，那也很酷。

---

更新 1 我正在使用 Angular 2 RC4，我尝试了@Martin 的方式。但即使我导入它，它仍然在下面的终端中给我错误:

终端(npm 启动)

/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.

终端(npm run watch)

error TS2304: Cannot find name 'LocalStorage'.

我猜它以某种方式与 angular2-universal 中的 LocalStorage 重复(尽管我没有使用 import { LocalStorage } from 'angular2-universal'; )，但即使我尝试将我的更改为 LocalStorage2，仍然无法正常工作。

与此同时，我的 IDE WebStorm 也显示红色:

顺便说一句，我找到了一个 import { LocalStorage } from 'angular2-universal';，但不确定如何使用它。

---

UPDATE 2，我改成了(不知道有没有更好的办法):

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`

    // …
  };
}

这解决了 UPADAT 1 中的问题，但现在我在终端中遇到错误:

EXCEPTION: TypeError: this.localStorage.getItem is not a function

Answer 1

这些步骤解决了我的问题:

第 1 步:运行此命令:

npm i localstorage-polyfill --save

第 2 步: 在 server.ts 文件中添加这两行:

import 'localstorage-polyfill'

global['localStorage'] = localStorage;

完成后，运行构建命令(例如:npm run build:serverless)

一切就绪。再次启动服务器，可以看到问题已经解决。

注意:使用 localStorage 而不是 window.localStorage，例如:localStorage.setItem(keyname, value)