CODEWITHSUNDEEP
angularwebpackkarma-runner
Amy
Amy

Reputation: 51

Setting up karma with angular2 and webpack: ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'

I followed the official Angular documentation for setting up an Angular2 project with webpack and karma: https://angular.io/docs/ts/latest/guide/webpack.html. The project works fine, but the karma setup does not. When I run "npm test" (or "karma start"), I keep getting this error:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' [my project path]/config/karma-test-shim.js in [my project path]

If I don't supply the karma-test-shim.js file at all, the error is different, so it definitely is finding the file. I have also tried emptying the karma-test-shim.js file and typing in some of the code by hand, in case of any weird characters from copy-pasting, and I still get that error.

How can I get past this error and run karma tests?

Contents of config/karma.conf.js (copied exactly from the documentation I linked above):

var webpackConfig = require('./webpack.test');

module.exports = function (config) {
var _config = {
basePath: '',

frameworks: ['jasmine'],

files: [
  {pattern: './config/karma-test-shim.js', watched: false}
],

preprocessors: {
  './config/karma-test-shim.js': ['webpack', 'sourcemap']
},

webpack: webpackConfig,

webpackMiddleware: {
  stats: 'errors-only'
},

webpackServer: {
  noInfo: true
},

reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: true
};

config.set(_config);
};

Contents of config/karma-test-shim.js (again, copied exactly from the documentation I linked above):

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

Upvotes: 0

Views: 667

Answers (1)

Amy
Amy

Reputation: 51

I finally got this setup to work.

What happened was this: I had followed that guide that I posted from the Angular documentation, to set up my project, maybe about a month ago. Weeks later, I went back to the same documentation to then set up karma and start writing tests. What I did not realize, until a teammate pointed it out to me, was that in that time, that page had been modified, and certain things were upgraded, including webpack. My initial setup was using webpack 1.x, as that was what was in the Angular documentation at the time, but when I was setting up karma, that documentation was now using webpack 2.x. This was very sneaky, for there was no indication that the documentation had changed.

I have updated my package.json according to the updates made to the documentation, and now karma works.

Upvotes: 0

Related Questions