Basic setup for angular2, typescript, webpack, babel, karma, jasmine

karma.conf.js

// Karma configuration
// Generated on Wed Nov 30 2016 09:30:14 GMT-0700 (MST)

var webpackConfig = require('./webpack.config.js');

module.exports = function (config) {
  config.set({

    // 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: [
      // paths loaded via module imports
      // Angular itself
      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

      'spec/javascripts/spec-all.spec.js'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'spec/javascripts/spec-all.spec.js': ['webpack', 'sourcemap']
    },

    webpack: Object.assign({}, webpackConfig, {devtool: 'inline-source-map'}),

    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: ['progress'],


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

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

package.json

{
  "devDependencies": {
    "@types/jasmine": "^2.5.38",
    "awesome-typescript-loader": "^3.0.0-beta.9",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "ts-loader": "^1.2.2",
    "typescript": "^2.0.10",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "@angular/common": "^2.2.3",
    "@angular/compiler": "^2.2.3",
    "@angular/core": "^2.2.3",
    "@angular/forms": "^2.2.3",
    "@angular/http": "^2.2.3",
    "@angular/platform-browser": "^2.2.3",
    "@angular/platform-browser-dynamic": "^2.2.3",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  }
}

spec-all.spec.js

require('zone.js');
require('reflect-metadata');
require('core-js');
require('rxjs/Rx');

var testsContext = require.context(".", true, /\.spec.ts$/);
testsContext.keys().forEach(function(path) {
    try {
        testsContext(path);
    } catch(err) {
        console.error('[ERROR] WITH SPEC FILE: ', path);
        console.error(err);
    }
});

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "useCache": true
  }
}

webpack.config.js

'use strict';

const webpack = require("webpack");
const fs = require('fs');
const prod = process.argv.indexOf('-p') !== -1;
const css_output_template = prod ? "stylesheets/[name]-[hash].css" : "stylesheets/[name].css";
const js_output_template = prod ? "javascripts/[name]-[hash].js" : "javascripts/[name].js";
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    context: __dirname + "/app/assets",

    entry: {
        application: ["./javascripts/application.ts", "./stylesheets/application.css"],
    },

    output: {
        path: __dirname + "/public",
        filename: js_output_template,
    },

    resolve: {
        extensions: ['', '.js', '.ts'],
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("css!sass")
            },
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader',
                exclude: /node_modules/
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin(css_output_template),
        function () {
            this.plugin("done", function (stats) {
                let output = "ASSET_FINGERPRINT = \"" + stats.hash + "\"";
                fs.writeFileSync("config/initializers/fingerprint.rb", output, "utf8");
            });
        },
        function() {
            this.plugin("compile", function() {
                let basepath = __dirname + "/public";
                let paths = ["/javascripts", "/stylesheets"];

                for (let x = 0; x < paths.length; x++) {
                    const asset_path = basepath + paths[x];

                    fs.readdir(asset_path, function(err, files) {
                        if(err) {
                            console.error("Received an error trying to read the asset directory:", err);
                            return;
                        }
                        for (let i = 0; i < files.length; i++) {
                            fs.unlinkSync(asset_path + "/" + files[i]);
                        }
                    });
                }
            });
        },
    ]
};