Typemoq 和 Angular-cli 不能一起工作

Question

一个基本的Generated Angular 2 cli application 有一些因果报应测试。

如果你那么npm install typemoq --save-dev

并将使用 typemoq 的内容添加到其中一个测试文件中。

import * as Moq from 'typemoq';

...

it('pointless test is pointless', async(() => {
   let carMock = Moq.Mock.ofInstance(Car);
}));

class Car { ... }

然后，当运行测试时，会发生以下错误。有没有人见过这种将 typemoq 与 angular-cli 一起使用或将依赖项引入 angular-cli 项目的情况？这里有什么问题？

TypeError：无法读取未定义的属性“substr” 在功能。 (C:\Source\ng-example-app\foo\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:115:26) 在 Array.forEach （本机） 在 SourceMapConsumer_eachMapping [as eachMapping] (C:\Source\ng-example-app\foo\node_modules\webpack-sources\node_modules\source-map\lib\source-map-consumer.js:155:14) 在 Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (C:\Source\ng-example-app\foo\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:80:24) 在 SourceMapSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\SourceMapSource.js:42:20) 在 ReplaceSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ReplaceSource.js:66:29) 在 C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 在 Array.map （本机） 在 ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) 在 C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 在 Array.map （本机） 在 ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) 在 C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 在 Array.map （本机） 在 ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) 在 C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 在 Array.map （本机） 在 ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) 在 ConcatSource.proto.sourceAndMap (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\SourceAndMapMixin.js:28:18) 在 CachedSource.sourceAndMap (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\CachedSource.js:51:28) 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\SourceMapDevToolPlugin.js:57:32) 在 Array.map （本机） 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\SourceMapDevToolPlugin.js:43:84) 在 Array.forEach （本机） 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\SourceMapDevToolPlugin.js:42:11) 在 Compilation.applyPlugins (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:25:14) 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:616:10) 在 Compilation.applyPluginsAsync (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:73:70) 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:612:9) 在 Compilation.applyPluginsAsync (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:73:70) 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:608:8) 在 Compilation.applyPluginsAsync (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:73:70) 在 Compilation.seal (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:554:7) 在编译器。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compiler.js:468:16) 在 C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:152:11 在编译。 (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:452:10) 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:423:12 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:52:16 完成后（C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:246:17） 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:52:16 完成后（C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:246:17） 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:52:16 完成后（C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:246:17） 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:52:16 完成后（C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:246:17） 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:52:16 在 Object.async.forEachOf.async.eachOf (C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:236:30) 在 Object.async.forEach.async.each (C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:209:22) 在 Compilation.addModuleDependencies (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:192:8) 在 Compilation.processModuleDependencies (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:177:7) 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:317:12 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:124:4 在 Array.forEach （本机） 在回调（C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:123:12） 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:147:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\NormalModule.js:209:10 在 C:\Source\ng-example-app\foo\node_modules\webpack\lib\NormalModule.js:164:10 在 C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:365:3 在 iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:206:10) 在 iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:213:10) 在 C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:228:3 在 runSyncOrAsync (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:125:11) 在 iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:224:2) 在 iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:213:10) 在 C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:228:3 在 context.callback (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:106:13) 在 C:\Source\ng-example-app\foo\node_modules\postcss-loader\index.js:67:13 在 process._tickCallback (internal/process/next_tick.js:103:7)

Answer 1

按照你的步骤，我做了以下事情：

• 安装最新的angular-cli（ver 1.0.0-beta.21）：npm install -g angular-cli

• 安装最新的typemoq（ver 1.0.2）：npm install --save-dev typemoq

• 创建一个新项目：ng new PROJECT_NAME && cd PROJECT_NAME
• 添加到./src/app/app.component.spec.ts：

import * as Moq from 'typemoq';
...

it('pointless test is pointless', () => {
    let carMock = Moq.Mock.ofInstance(Car);
});

class Car {
}

• 运行命令ng test --watch=false，返回：

  执行 4 of 4 成功（0.163 秒 / 0.157 秒）

更新到最新的angular-cli和typemoq后，你还遇到这个错误吗？

Answer 2

在 typemoq 和 webpack 上遇到了同样的问题。

我试用了您的示例，它在我的机器上运行良好。

我认为这个问题更多地与 webpack 如何根据 https://github.com/mozilla/source-map/issues/247 处理源映射有关。

我可以让我的 webpack/typemoq 项目正常工作，如果我按照上面的链接状态进行操作，并删除 typemoq.js 末尾的 sourcemap 注释。

在 webpack/js 等方面经验不足，无法判断球是使用 TypeMoq 还是 source-map - 但手指似乎倾向于指向 source-map。

重温

我认为我的问题来自从 systemjs 迁移到 webpack 时的一些不一致的设置。 Karma 在将 Javascript 的覆盖范围重新映射回 TypeScript 时遇到了问题——我猜这就是 source-map 可能会被提供一些“空”而不是映射文件的地方。

为了澄清我是如何把这一切理顺的，我做了以下事情：

1. 拉取 Angular2-Webpack-starter 示例
2. 构建并运行 karma start karma.conf.js
3. 带上你最喜欢的差异工具，确保样本文件和你的文件之间的差异尽可能小。从 karma.conf.js 开始，然后是 spec.bundle.js 和 webpack.test.js

如果你遇到'找不到 sourcemap' (https://github.com/AngularClass/angular2-webpack-starter/issues/1117)

那你可能是来安装最新的 instanbul-instrumenter-loader - 见https://github.com/AngularClass/angular2-webpack-starter/issues/1188 - 目前（撰写本文时）应使用 0.2.0。

在重置所有内容并回到基础之后 - 一切似乎都正常运行……现在。 :-)