Karma-Jasmine seems to load files twice

Question

I am working on a project using AngularJS 1.7 in TypeScript. For tests, we use Jasmine ran by Karma. However, it seems when I try to load up the library files, Karma loads them twice, which of course causes a number of issues. I am fairly new to Karma, so it is very possible I just misconfigured something. Here is the Karma configuation file in question:

module.exports = function(config) { 
    config.set({
        port: 9877,

        files: [
            'node_modules/angular/angular.js',
            'node_modules/angular-animate/angular-animate.js',
            'node_modules/angular-mocks/angular-mocks.js',
            'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
            'node_modules/core-js/client/shim.min.js',
            'node_modules/d3/d3.js',
            'node_modules/jquery/dist/jquery.js',
            'node_modules/nvd3/build/nv.d3.js',

            './app/**/*.js',
            './app/**/*.ts'
        ],

        frameworks: ['jasmine', 'karma-typescript'],

        preprocessors: {
            './app/**/*.test.ts': ['karma-typescript'],
            './app/**/!(*.test).ts': ['karma-typescript', 'coverage']
        },

        reporters: ['progress', 'karma-typescript', 'coverage'],

        coverageReporter: {
            type: 'text-summary'
        },

        karmaTypescriptConfig: {
            tsconfig: "./tsconfig.json"
        },

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        browsers: ['ChromeHeadless'],
        //https://github.com/karma-runner/karma-chrome-launcher/issues/73
        //https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai
        customLaunchers: {
            ChromeNoSandbox: {
                base: 'Chrome',
                flags: ['--headless', '--disable-translate', '--remote-debugging-port=9222', '--no-sandbox']
            }
        },

        plugins: [
            'karma-chrome-launcher',
            'karma-coverage',
            'karma-jasmine',
            'karma-typescript'
        ],

        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000,
        browserNoActivityTimeout: 30000
    });
};

If I take out the files listed in node_modules, Karma complains about some AngularJS things being undefined, so I am almost certain they are necessary. But when I try to run my tests, I get these errors:

HeadlessChrome 68.0.3440 (Windows 7.0.0) LOG: 'WARNING: Tried to load AngularJS more than once.'


Error: [$injector:modulerr] Failed to instantiate module ng due to:
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:1:1)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at Function.angular.injector.$$annotate (node_modules/angular-mocks/angular-mocks.js:2921:36)
    at <Jasmine>
    at <Jasmine>
    at node_modules/angular/angular.js:138:12
    at node_modules/angular/angular.js:5027:15
    at forEach (node_modules/angular/angular.js:387:20)
    at loadModules (node_modules/angular/angular.js:4987:5)
    at Object.createInjector [as injector] (node_modules/angular/angular.js:4904:19)
    at UserContext.WorkFn (C:/Users/cdawson/AppData/Local/Temp/karma-typescript-bundle-17920e0YyaRMZnBnq.js:38954:52)
    at window.inject.angular.mock.inject (C:/Users/cdawson/AppData/Local/Temp/karma-typescript-bundle-17920e0YyaRMZnBnq.js:38934:42)
    at UserContext.<anonymous> (app/Alarm/alarm_alarmHub.service.test.ts:93:12 <- app/Alarm/alarm_alarmHub.service.test.js:77:13)
    at <Jasmine>

I suspect it to be Karma loading the files twice due to some searching that led me here. However, I am not adding any concatenated library files or anything to my configuration, so that particular solution does not apply to me. What am I missing?

Answer 1

This is how i use in my karma config, Please try to map with this. node modules should be compile in vendor.js itself

files: [
  // vendor files must be built as mock mode. ie, using "--api mock" (see commands below)
  // 1. gulp build --api mock
  'public/js/vendor.js',

  // src & http-backend files
  'src/app/**/app.!(spec).js',
  'src/app/**/!(*.spec).js',

  // complied templates
  'public/js/app.templates.js',

  // spec files
  'src/app/**/*.spec.js',

  // fixtures
  {pattern: 'src/mocks/**/*.json', included: false}
]