Angular-CLI“ng e2e”：在使用 ts-node 的量角器测试中缺少 localStorage答案

【问题标题】：Angular-CLI "ng e2e": missing localStorage in protractor tests with ts-nodeAngular-CLI“ng e2e”：在使用 ts-node 的量角器测试中缺少 localStorage
【发布时间】：2017-02-20 18:33:44
【问题描述】：

我有一个基于ngrx 并使用@angular/cli: 1.0.0-beta.32.3 构建的Angular2 项目。该应用程序本身与官方支持的示例 ngrx 应用程序有很多共同点：https://github.com/ngrx/example-app。

我使用 https://github.com/btroncone/ngrx-store-localstorage 包将商店的某些部分与 localStorage 同步，所以：

在我的reducers/index.ts 文件中（看起来像原来的https://github.com/ngrx/example-app/blob/master/src/app/reducers/index.ts）代替原来的：

const developmentReducer: ActionReducer<State> = compose(
  storeFreeze,
  combineReducers
)(reducers);

const productionReducer: ActionReducer<State> = combineReducers(reducers);

我有稍微修改过的版本：

const developmentReducer: ActionReducer<State> = compose(
  storeFreeze,
  localStorageSync(['auth'], true),
  combineReducers
)(reducers);

const productionReducer: ActionReducer<State> = compose(
  localStorageSync(['auth'], true),
  combineReducers
)(reducers);

它工作得很好，完全没有问题。

问题是我无法使用此设置运行量角器 e2e 测试。这个localStorageSync 将浏览器的localStorage 作为默认参数。但是，angular-cli's protractor 使用ts-node，如protractor.conf.js 中所述：

beforeLaunch: function() {
  require('ts-node').register({
    project: 'e2e'
  });
},

ng e2e 以错误结尾：

[19:25:07] I/direct - Using ChromeDriver directly...
[19:25:09] E/launcher - Error: ReferenceError: localStorage is not defined
    at Object.exports.localStorageSync (/home/myfolder/e2e-storage-test/node_modules/ngrx-store-localstorage/src/index.ts:118:77)
    at Object.<anonymous> (/home/myfolder/e2e-storage-test/src/app/reducers/index.ts:32:3)
    at Module._compile (module.js:570:32)
    at Module.m._compile (/home/myfolder/e2e-storage-test/node_modules/ts-node/src/index.ts:406:23)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/home/myfolder/e2e-storage-test/node_modules/ts-node/src/index.ts:409:12)

此处提供完整的回溯：https://gist.github.com/radoslawroszkowiak/17e53b9043264b6d813df2374e8d4dc8。

我想避免弄乱 node-localstorage 之类的东西，因为我不希望这个项目用于服务器端渲染，只用于浏览器环境。

如何解决这个问题？

【问题讨论】：

标签： javascript angular protractor angular-cli typescript2.0

【解决方案1】：

正如人们所预料的那样，原因很愚蠢。

在一个 e2e 测试文件中，有一个从应用程序的路由模块导入的路径名。这导致了导入链，包括在路由模块中导入的组件等。

由于e2e测试文件是使用ts-node执行的，而不是在浏览器上下文中，所以编译器一遇到localStorage发生就抛出错误。

在 e2e 规范文件中删除有问题的导入解决了该问题。

我的结论是：在 e2e 模块中从您的应用中导入任何内容时要小心。

【讨论】：