Typemoq and Angular-cli don't work together

Question

A basic Generated Angular 2 cli application has some karma-jasmine tests.

If you then npm install typemoq --save-dev

and add something that uses typemoq to one of the test files.

import * as Moq from 'typemoq';

...

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

class Car { ... }

Then when the tests are run the error below happens. Has anyone seen this sort of thing which using typemoq with angular-cli or when pulling in dependencies into angular-cli projects in general? What's the problem here?

TypeError: Cannot read property 'substr' of undefined at Function. (C:\Source\ng-example-app\foo\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:115:26) at Array.forEach (native) at 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) at 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) at SourceMapSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\SourceMapSource.js:42:20) at ReplaceSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ReplaceSource.js:66:29) at C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 at Array.map (native) at ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) at C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 at Array.map (native) at ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) at C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 at Array.map (native) at ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) at C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:40:49 at Array.map (native) at ConcatSource.node (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\ConcatSource.js:39:60) at ConcatSource.proto.sourceAndMap (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\SourceAndMapMixin.js:28:18) at CachedSource.sourceAndMap (C:\Source\ng-example-app\foo\node_modules\webpack-sources\lib\CachedSource.js:51:28) at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\SourceMapDevToolPlugin.js:57:32) at Array.map (native) at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\SourceMapDevToolPlugin.js:43:84) at Array.forEach (native) at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\SourceMapDevToolPlugin.js:42:11) at Compilation.applyPlugins (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:25:14) at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:616:10) at Compilation.applyPluginsAsync (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:73:70) at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:612:9) at Compilation.applyPluginsAsync (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:73:70) at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:608:8) at Compilation.applyPluginsAsync (C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:73:70) at Compilation.seal (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:554:7) at Compiler. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compiler.js:468:16) at C:\Source\ng-example-app\foo\node_modules\tapable\lib\Tapable.js:152:11 at Compilation. (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:452:10) at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:423:12 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 at 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) at C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 at 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) at C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 at 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) at C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 at 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) at C:\Source\ng-example-app\foo\node_modules\webpack\node_modules\async\lib\async.js:44:16 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:335:10 at 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) at Compilation.addModuleDependencies (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:192:8) at Compilation.processModuleDependencies (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:177:7) at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:317:12 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:124:4 at Array.forEach (native) at callback (C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:123:12) at C:\Source\ng-example-app\foo\node_modules\webpack\lib\Compilation.js:147:10 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\NormalModule.js:209:10 at C:\Source\ng-example-app\foo\node_modules\webpack\lib\NormalModule.js:164:10 at C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:365:3 at iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:206:10) at iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:213:10) at 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) at iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:224:2) at iterateNormalLoaders (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:213:10) at C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:228:3 at context.callback (C:\Source\ng-example-app\foo\node_modules\loader-runner\lib\LoaderRunner.js:106:13) at C:\Source\ng-example-app\foo\node_modules\postcss-loader\index.js:67:13 at process._tickCallback (internal/process/next_tick.js:103:7)

Having the exact same problem. I've tried just about every way I can think of to try to load the Typemoq module but the lack of documentation and poor error messages are making this very hard to figure out. — Kai G, Oct 17 '16 at 22:27
I never figured this out, I switched just my tests to gulp/browserify if you with [this sort of configuration](http://stackoverflow.com/questions/40024823/enable-experimental-support-for-decorators-with-tsify-in-karma/40031618#40031618) — Nathan Cooper, Oct 24 '16 at 06:51
I investigated this a bit more and found that the problem is caused by the source map loader having problems with the inline source map defined at the end of Typemoq.js. If only angular-cli allowed you to override the webpack configuration it would be very easy to not load the Typemoq source mappings. I was able to get this working if I hack the webpack config in my node_modules but that's obviously not a viable solution. — Kai G, Oct 24 '16 at 12:10

score 1 · Answer 1 · answered Nov 29 '16 at 20:04

Following your steps, I've done the following:

install latest angular-cli (ver 1.0.0-beta.21): npm install -g angular-cli
install latest typemoq (ver 1.0.2): npm install --save-dev typemoq
create a new project: ng new PROJECT_NAME && cd PROJECT_NAME
add to ./src/app/app.component.spec.ts:

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

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

class Car {
}

run command ng test --watch=false which returned:

Executed 4 of 4 SUCCESS (0.163 secs / 0.157 secs)

Do you still encounter the error after updating to the latest angular-cli and typemoq?

ankhansen · Answer 2 · 2016-12-05T12:55:56.167

Ran into the same issue with typemoq and webpack.

I tried your sample, and it works fine on my machine.

I think the problem is more related to how webpack works with the sourcemaps according to this https://github.com/mozilla/source-map/issues/247.

I can get my webpack/typemoq project working fine, if I do as the above link states, and removes the sourcemap comment at the end of typemoq.js.

Not experienced enough in webpack/js etc. to tell if the ball is with TypeMoq or source-map - but it seems like the finger tends to point at source-map.

REVISITED

I think my problem came from some inconsistent setup while moving from systemjs to webpack. Karma had problems remapping coverage of Javascript back to TypeScript - and I guess that is where source-map might be fed something "empty" instead of a mapping file.

To clarify how I got it all straightened out I did the following:

Pull the Angular2-Webpack-starter example
Build and run karma start karma.conf.js
Take you favorite diff tool, and ensure differences between sample files and your files are as little as possible. Start at karma.conf.js, then spec.bundle.js and webpack.test.js

If you run into 'Could not find sourcemap' ( https://github.com/AngularClass/angular2-webpack-starter/issues/1117)

Then you probably came to install latest instanbul-instrumenter-loader - see https://github.com/AngularClass/angular2-webpack-starter/issues/1188 - For now (as of this writing) 0.2.0 should be used.

After having reset everything, and moved back to basics - everything seems to work as it should... For now. :-)

I just tried to use the https://github.com/AngularClass/angular2-webpack-starter and then installed typemoq (npm install typemoq --save-dev ) and added the _pointles_ test case. And that seems to work as supposed. Will try to make a diff of my setup and the webpack starter - and see if I can make it work - and the I will get back. — ankhansen, Dec 05 '16 at 11:22

Typemoq and Angular-cli don't work together

2 Answers2