Karma: Karma unable to find aliases. "Cannot find module..."

[VinishaDsouza]

Hi everyone! I am new to using karma and was wondering if anyone knows how to defina aliases in karma.

Actual behaviour

When I run karma start, I get an error saying:
Uncaught Error: Cannot find module "@angular/core" at build/StartPage-bundle.js:15165

Environment Details

karma-requirejs@^1.1.0

// Karma configuration
// Generated on Fri May 29 2015 21:48:48 GMT+0200 (CEST)

var webpackConfig = require('./webpack.config.js');
module.exports = function (config) {
config.set({

    webpack: webpackConfig,

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
        "libs/requirejs/require-2.1.15.js",
        "libs/angular/angular-1.5.8.js",
        "miniapp/common/ng2Core.js",
        "build/shared-bundle.js",
        "build/test/webapi-test-bundle.js",
        "build/LegalNotice-bundle.js",
        "build/*.js",
        "build/test/*.js",
        //{ pattern: 'miniapp/dataModel/test/-dataModel.tests.js', watched: false }
    ],




    // list of files to exclude
    exclude: [
    ],

    plugins: [
        "jasmine-core",
        "karma-chrome-launcher",
        "karma-jasmine",
        "karma-jasmine-jquery",
        "karma-mocha-reporter",
        "karma-phantomjs-launcher",
        "karma-requirejs",
        "karma-webpack"
    ],

    // proxies: {
    //  "@angular/core": "./miniapp/common/ng2Core"
    // },

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        "build/*.js": ['webpack'],
        "build/test/*.js": ['webpack']
    },

    webpack: {
    module: webpackConfig.module,
    resolve: webpackConfig.resolve
   },

    webpackMiddleware: {
        // webpack-dev-middleware configuration 
        // i. e. 
        stats: 'errors-only'
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha'],


    // web server port
    port: 9876,


    // 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,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
})

}
``

[kris-ellery]

@VinishaDsouza have you found a fix for this issue? For some reason Karma is not able to resolve local modules for me. Even tho Webpack works fine and I'm reusing resolve.alias.

[capitantrueno]

Edit my answer to share my solution.

In my case, I have a tsconfig.json where specify 'baseUrl' and 'paths' for aliases definition:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@assets/*": ["assets/*"],
      "@classes/*": ["app/classes/*"],
      "@components/*": ["app/components/*"],
      "@directives/*": ["app/directives/*"],
      "@enums/*": ["app/enums/*"],
      "@env/*": ["environments/*"],
      "@services/*": ["app/services/*"],
      "@views/*": ["app/views/*"]
    },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

In order karma can use aliases, I just edit my tsconfig.spec.json to look like this:

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": ".",
    "paths": {
      "@app/*": ["app/*"],
      "@assets/*": ["assets/*"],
      "@classes/*": ["app/classes/*"],
      "@components/*": ["app/components/*"],
      "@directives/*": ["app/directives/*"],
      "@enums/*": ["app/enums/*"],
      "@env/*": ["environments/*"],
      "@services/*": ["app/services/*"],
      "@views/*": ["app/views/*"]
    },
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

Best regards!

[jhkueh]

I noticed that you'll only need to add this line "baseUrl": ".", in your tsconfig.spec.json file (like below), if you already had 'path' aliases definition in your tsconfig.json file:

{
  "compilerOptions": {
     ...
    "baseUrl": ".",
    ...
}