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 { ... }

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

TypeError：无法读取属性＆＃39; substr＆＃39;未定义的在功能。（C：\源\ NG-示例应用内\ FOO \ node_modules \的WebPack来源\ node_modules \源映射\ lib中\源的node.js：115：26） at Array.forEach（native）在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：\源\ NG-示例应用内\ FOO \ node_modules \的WebPack \ lib中\ SourceMapDevToolPlugin.js：57：32）在Array.map（本机）在汇编。（C：\源\ NG-示例应用内\ FOO \ node_modules \的WebPack \ lib中\ SourceMapDevToolPlugin.js：43：84） at Array.forEach（native）在汇编。（C：\源\ NG-示例应用内\ 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：\源\ NG-示例应用内\ 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：\源\ NG-示例应用内\ 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：\源\ NG-示例应用内\ 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：\源\ NG-示例应用内\ FOO \ node_modules \的WebPack \ lib中\ Compiler.js：468：16）在C：\ Source \ ng-example-app \ foo \ node_modules \ tapable \ lib \ Tapable.js：152：11 在汇编。（C：\源\ NG-示例应用内\ 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 at done（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 at done（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 at done（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 at done（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 at Object.async.forEachOf.async.eachOf（C：\ Source \ ng-example-app \ foo \ node_modules \ webpack \ node_modules \ async \ lib \ async.js：236：30） at 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 at Array.forEach（native）在回调（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 at 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 at process._tickCallback（internal / process / next_tick.js：103：7）

Answer 1

按照您的步骤，我已完成以下操作：

安装最新的 angular-cli （版本1.0.0-beta.21）：npm install -g angular-cli
安装最新的 typemoq （版本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次成功中的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或源图 - 但看起来手指往往指向源图。

<强> REVISITED

我认为我的问题来自于从systemjs转移到webpack时的一些不一致的设置。 Karma将Javascript的覆盖范围重新映射回TypeScript时遇到了问题 - 我想这就是源映射可能会被输入的东西＆＃34;空的＆＃34;而不是映射文件。

为了澄清我是如何理顺的，我做了以下几点：

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

如果您遇到＆＃39;无法找到源图＆＃39; （https://github.com/AngularClass/angular2-webpack-starter/issues/1117）

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

重置所有东西后，又回到了基础 - 一切似乎都应该工作......现在。： - ）

Typemoq和Angular-cli不能一起工作

2 个答案: