Angular Universal Starter，LocalStorage in Production：在browser.module中使用'window'来引用生成版本

Question

这里有一个很好的q＆amp; a使用localstorage和angular2。 https://stackoverflow.com/a/39098748/6203604

这种方法似乎可以正常运行'npm start'。但是当你运行'npm run build'时出错：

  

类型'typeof ../browser.module'上不存在属性'window'   出现。

在https://github.com/angular/universal-starter上的'Universal Gotchas'中，它说

  

窗口，文档，导航器和其他浏览器类型 - 不存在   服务器 - 所以使用它们，或任何使用它们的库（jQuery for   例子）不会工作。如果你真的需要，你确实有一些选择   其中一些功能：如果您需要使用它们，请考虑限制   他们只对你的main.client进行情境封装   从Universal导入isBrowser / isNode功能。 import {   isBrowser，isNode}来自'angular2-universal';另一种选择是使用   来自“@ angular / platform-b​​rowser”的DOM

isBrowser包装器或使用平台浏览器是否适合引用localStorage？有关如何最好地写这个的任何例子吗？

例如在browser.module.ts中，是否应该为可分发的包裹包装window.localStorage？

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

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

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

可以使用'npm run build'distributable bundle吗？

此外，当运行npm start时，我收到错误消息：意外的令牌u。

这似乎是来自文件node.module.ts中useValue中的'u'，作为disapears并被替换为'No Provider for Token LocalStorage！'

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

任何人都有类似的东西。想法？

Answer 1

您可以为不能实际访问window的服务器使用“假”存储服务，并使用DI在服务器模块上设置它，并为浏览器模块使用正确的window访问权限。可以找到一个很好的例子here