Typemoq和Angular-cli无法一起使用。

Question

Typemoq和Angular-cli无法一起使用。

4

一个基本的Angular 2 cli应用程序包含一些karma-jasmine测试。

如果你运行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项目时发生的这种情况？问题在哪里？

类型错误：无法读取未定义的“substr”属性在Function。（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）在Compilation。（C：\ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ SourceMapDevToolPlugin.js:57:32）在Array.map（本地）在Compilation。（C：\ Source \ ng-example-app \ foo \ node_modules \ webpack \ lib \ SourceMapDevToolPlugin.js:43:84）在Array.forEach（本地）在Compilation。（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）在Compilation。（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）在Compilation。（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）在Compilation。（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）在Compiler。（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

- Nathan Cooper

遇到完全相同的问题。我已经尝试了几乎所有我能想到的方法来加载Typemoq模块，但是缺乏文档和糟糕的错误信息使得这个问题非常难以解决。 - Kai G

我从未解决这个问题，但我只是将我的测试切换到了gulp/browserify，如果您想使用这种配置。 - Nathan Cooper

1

我进一步调查了一下，发现问题是由于源映射加载器在Typemoq.js末尾定义的内联源映射存在问题所致。如果angular-cli允许您覆盖webpack配置，那么不加载Typemoq源映射将非常容易。我能够通过在我的node_modules中修改webpack配置来使其正常工作，但这显然不是可行的解决方案。 - Kai G

2个回答

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个测试，全部成功 (0.163 秒 / 0.157 秒)

更新到最新的angular-cli和typemoq后，您是否仍然遇到错误？

- florinn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ankhansen · Accepted Answer

遇到了与typemoq和webpack相关的相同问题。

我尝试了你提供的样例，它在我的机器上能够正常工作。

我认为这个问题更多地涉及webpack如何处理sourcemaps，根据https://github.com/mozilla/source-map/issues/247所说。

如果按照上述链接中所述的方式删除typemoq.js末尾的sourcemap注释，我可以使我的webpack / typemoq项目正常运行。

对于webpack / js等方面的经验不足，无法确定是TypeMoq还是source-map的问题 - 但似乎手指倾向于source-map。
重访
我认为我的问题来自于系统js移动到webpack时设置不一致。

Karma在将Javascript的覆盖范围映射回TypeScript时遇到了问题 - 我想这可能是source-map可能被输入“空”而不是映射文件的地方。

为了澄清我如何解决所有问题，我做了以下：

拉取Angular2-Webpack-starter示例
构建并运行karma start karma.conf.js
使用您喜欢的diff工具，确保示例文件和您的文件之间的差异尽可能小。从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。

重置所有内容并回到基础知识后，一切似乎都按预期工作......目前为止。 :-)