localStorage未定义(Angular Universal)

Question

我使用通用启动器作为主干.

当我的客户端启动时,它会从localStorage读取有关用户信息的令牌.

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

  bar() {}

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

    // do other things
  };
}

一切都很好,但是由于服务器渲染,我在服务器端(终端)得到了这个:

EXCEPTION:ReferenceError:未定义localStorage

我从ng-conf-2016-universal-patterns获得了这个想法,它使用依赖注入来解决这个问题.但那个演示真的很老了.

说我现在有这两个文件:

main.broswer.ts

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

    UserService
  ]);
}

main.node.ts

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

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

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

如果有另一种更好的方式而不是依赖注入,那也很酷.

---

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

终点站(npm开始)

/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240 throw new reflector_exceptions_1.NoAnnotationError(typeOrFunc,params); ^错误:无法解析'UserService'的所有参数(Http,？).确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且"UserService"使用Injectable进行修饰.

终端(npm跑表)

错误TS2304:找不到名称'LocalStorage'.

我猜它是以某种方式重复与LocalStorage来自angular2-universal(虽然我没有使用import { LocalStorage } from 'angular2-universal';),但即使我试图改变我的LocalStorage2,仍然没有工作.

同时,我的IDE WebStorm也显示为红色:

顺便说一句,我找到了import { LocalStorage } from 'angular2-universal';,但不知道如何使用它.

---

更新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不是函数

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)

Answer 2

更新版本的Angular

OpaqueToken被它取代的InjectionToken工作方式大致相同 - 除了它有一个通用接口InjectionToken<T>,可以更好地进行类型检查和推理.

原始答案

两件事情:

1. 您没有注入任何包含localStorage对象的对象,而是尝试直接作为全局对象访问它.任何全球访问都应该是出现问题的第一个线索.
2. nodejs中没有window.localStorage.

您需要做的是为localStorage注入一个适用于浏览器和NodeJS的适配器.这也将为您提供可测试的代码.

在local-storage.ts中:

import { OpaqueToken } from '@angular/core';

export const LocalStorage = new OpaqueToken('localStorage');

在main.browser.ts中,我们将从您的浏览器中注入实际的localStorage对象:

import {LocalStorage} from './local-storage.ts';

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

    UserService,
    { provide: LocalStorage, useValue: window.localStorage}
  ]);

然后在main.node.ts中我们将使用一个空对象:

... 
providers: [
    // ...
    UserService,
    {provide: LocalStorage, useValue: {getItem() {} }}
]
...

然后你的服务注入了这个:

import { LocalStorage } from '../local-storage';

export class UserService {

    constructor(@Inject(LocalStorage) private localStorage: LocalStorage) {}

    loadCurrentUser() {

        const token = this.localStorage.getItem('token');
        ...
    };
}

Answer 3

在Angular 4(和5)中,您可以通过以下方式使用简单的函数轻松处理此类问题:

app.module.ts

@NgModule({
    providers: [
        { provide: 'LOCALSTORAGE', useFactory: getLocalStorage }
    ]
})
export class AppModule {
}

export function getLocalStorage() {
    return (typeof window !== "undefined") ? window.localStorage : null;
}

如果您有一个服务器/客户端拆分文件AppModule,将它放在app.module.shared.ts文件中 - 该函数不会破坏您的代码 - 除非您需要为服务器和客户端构建强制执行完全不同的行为; 如果是这种情况,那么实现自定义类工厂可能更明智,就像在其他答案中显示的那样.

无论如何,一旦完成了提供程序实现,您可以LOCALSTORAGE在任何Angular组件中注入泛型,并isPlatformBrowser在使用之前使用Angular-native 函数检查平台类型:

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable()
export class SomeComponent {
    constructor(
        @Inject(PLATFORM_ID) private platformId: any,
        @Inject('LOCALSTORAGE') private localStorage: any) {

        // do something

    }

    NgOnInit() {
        if (isPlatformBrowser(this.platformId)) {
            // localStorage will be available: we can use it.
        }
        if (isPlatformServer(this.platformId)) {
            // localStorage will be null.
        }
    }
}

值得注意的是,由于如果窗口对象不可用,getLocalStorage()函数将返回null,您可以检查是否为 this.localStorage空,并完全跳过平台类型检查.但是,我强烈建议使用上述方法,因为函数实现(和返回值)可能会在将来发生变化; 相反, isPlatformBrowser/ isPlatformServer返回值是设计可信任的东西.

有关更多信息,请查看我在该主题上撰写的这篇博文.

Answer 4

我在 Angular 4 + Universal 中遇到了类似的问题，请按照此处的步骤配置可以在客户端或服务器端呈现的 SPA。

我使用oidc-client因为我需要我的 SPA 作为我的身份服务器的 OpenId Connect/Oauth2 客户端。

问题是我遇到了典型的问题，其中 localStorage 或 sessionStorage 未在服务器端定义（它们仅在有窗口对象时才存在，因此 nodeJs 拥有这些对象是没有意义的）。

我没有成功尝试模拟 localStorage 或 sessionStorage 的方法，并在浏览器中使用真实的，而在服务器中使用空的。

但我得出的结论是，根据我的需要，我并不真正需要 localStorage 或 sessionStorage 在服务器端做任何事情。如果在 NodeJs 中执行，只需跳过使用 sessionStorage 或 localStorage 的部分，然后执行将发生在客户端。

这就足够了：

console.log('Window is: ' + typeof window);
    this.userManager = typeof window !== 'undefined'? new oidc.UserManager(config) : null; //just don't do anything unless there is a window object

在客户端呈现它打印： Window is: object

在 nodeJs 中，它打印： Window is: undefined

这样做的好处在于，当没有窗口对象时，Angular Universal 将简单地忽略服务器端的执行/渲染，但是当 Angular Universal 将带有 javascript 的页面发送到浏览器时，该执行将正常工作，因此即使我正在运行我在 NodeJs 中的应用程序最终我的浏览器打印了以下内容： Window is: object

我知道对于那些真正需要在服务器端访问 localStorage 或 sessionStorage 的人来说，这不是一个正确的答案，但在大多数情况下，我们使用 Angular Universal 只是为了渲染任何可能在服务器端渲染的东西，以及发送那些无法渲染到浏览器正常工作。

Answer 5

尽管这种方法看起来很奇怪，但它确实有效，而且我不必做其他答案所建议的任何管道工作。

第1步

安装localstorage-polyfill：https : //github.com/capaj/localstorage-polyfill

第2步

假设您按照以下步骤操作：https://github.com/angular/angular-cli/wiki/stories-universal-rendering，您应该server.js在项目根文件夹中有一个名为的文件。

在此server.js添加：

import 'localstorage-polyfill'

global['localStorage'] = localStorage;

第 3 步

重建您的项目，npm run build:ssr现在一切正常。

上述方法有效吗？是的，据我所知。

它是最好的吗？也许不吧

任何性能问题？从来没听说过。开导我。

然而，就目前而言，这是让我localStorage通过的最愚蠢、最干净的方法

Answer 6

您可以使用 PLATFORM_ID 令牌来检查当前平台是浏览器还是服务器。

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

   constructor(@Inject(PLATFORM_ID) private platformId: Object) {  }

   ngOnInit() {

     // Client only code.
     if (isPlatformBrowser(this.platformId)) {
        let item = {key1: 'value1', key2: 'valu2' };
        localStorage.setItem( itemIndex, JSON.stringify(item) );
     }

   }
 }