Webpack build with ts-loader giving warnings about typings

Question

I have the following development setup:

• Angular2 (with Typescript)
• Webpack for packaging
• Karma as a test runner for Jasmine tests
• Gulp for invoking Karma

Karma is configured as follows:

var webpackConfig = require('./webpack.config');
webpackConfig.entry = {};

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

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

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

    reporters: [],
    coverageReporter: {},
    port: 9876,
    action: 'run',
    colors: true,
    logLevel: config.LOG_INFO, // LOG_DEBUG | LOG_INFO | LOG_WARN | LOG_ERROR
    autoWatch: false,
    autoWatchBatchDelay: 300,
    singleRun: true,

    files: [ { pattern: './spec-bundle.js', watched: false } ],
    exclude: [],
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        './spec-bundle.js': ['webpack']
    },

    webpack: webpackConfig,

    // https://webpack.github.io/docs/webpack-dev-middleware.html
    webpackMiddleware: {
        noInfo: true,
        stats: 'errors-only'
    },

    plugins: [
        'karma-coverage',
        'karma-jasmine',
        'karma-phantomjs-launcher',
        'karma-teamcity-reporter',
        'karma-webpack'
    ]
});
}

Webpack is configured as follows:

var webpack = require('webpack');

module.exports = {
entry: {
    main: './src/run.ts'
},
target: 'web', // 'web' | 'node'
output: {
    filename: '[name].js',
    pathinfo: true
},
devtool: 'source-map',
resolve: {
    extensions: ['', '.ts', '.js']
},
resolveLoader: {
    modulesDirectories: ['node_modules']
},
module: {
    loaders: [
        { test: /\.ts$/, loader: 'ts-loader' },
        // fastclick contains AMD and CJS loader logic - disable AMD so CJS is used
        { test: require.resolve('fastclick'), loader: 'imports?define=>false' }
    ],
    postLoaders: [
        { test: /\.ts$/, exclude: /(node_modules|spec)\//, loader: 'istanbul-instrumenter' }
    ]
},
stats: {
    colors: true,
    errorDetails: true,
    modules: false,
    reasons: true   // add information about the reasons why modules are included
}
};

ts is configured as follows:

"compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "module": "commonjs",
    "outDir": "../dist/app",
    "sourceMap": true
},
"buildOnSave": false,
"compileOnSave": false
}    

(/node_modules is at the same level as /src and tsconfig.json is in the /src folder).

So, I have a /src/typings folder which contains various *.d.ts files for lodash, fastclick, etc. When I invoke Karma I get the following message for each of the definitions:

WARNING in ./src/typings/lodash/lodash.d.ts
Module build failed: Error: Typescript emitted no output for /Users/jbrighton/src/teammember-client/src/typings/lodash/lodash.d.ts
at Object.loader (/Users/jbrighton/src/teammember-client/node_modules/ts-loader/index.js:456:15)
 @ ./src \.ts

The Jasmine tests run successfully (and the non-test build runs fine) but what is causing these messages and how do I prevent them?

Straggle

I am annoyed by similar messages, were you able to figure out how to quiet them? – Slumgullion

I'm afraid not. Moving over to Webpack2 at some point to see whether that makes any difference. – Straggle

In the section, files of your karma config file, have you tried pointing it to the ts files for the tests? I have written a blog post about this in the past. I hope it helps: templecoding.com/blog/2016/02/02/… – Akvavit

That to me seems like you haven't npm installed lodash --save-dev... – Brynne