Initial commit.

config/helpers.js

@@ -0,0 +1,69 @@
+/**
+ * @author: @AngularClass
+ */
+
+var path = require('path');
+
+// Helper functions
+var _root = path.resolve(__dirname, '..');
+
+console.log('root directory:', root());
+
+function hasProcessFlag(flag) {
+  return process.argv.join('').indexOf(flag) > -1;
+}
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+function rootNode(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return root.apply(path, ['node_modules'].concat(args));
+}
+
+function prependExt(extensions, args) {
+  args = args || [];
+  if (!Array.isArray(args)) { args = [args] }
+  return extensions.reduce(function(memo, val) {
+    return memo.concat(val, args.map(function(prefix) {
+      return prefix + val;
+    }));
+  }, ['']);
+}
+
+function packageSort(packages) {
+  // packages = ['polyfills', 'vendor', 'main']
+  var len = packages.length - 1;
+  var first = packages[0];
+  var last = packages[len];
+  return function sort(a, b) {
+    // polyfills always first
+    if (a.names[0] === first) {
+      return -1;
+    }
+    // main always last
+    if (a.names[0] === last) {
+      return 1;
+    }
+    // vendor before app
+    if (a.names[0] !== first && b.names[0] === last) {
+      return -1;
+    } else {
+      return 1;
+    }
+  }
+}
+
+function reverse(arr) {
+  return arr.reverse();
+}
+
+exports.reverse = reverse;
+exports.hasProcessFlag = hasProcessFlag;
+exports.root = root;
+exports.rootNode = rootNode;
+exports.prependExt = prependExt;
+exports.prepend = prependExt;
+exports.packageSort = packageSort;

config/karma.conf.js

@@ -0,0 +1,90 @@
+/**
+ * @author: @AngularClass
+ */
+
+module.exports = function(config) {
+  var testWebpackConfig = require('./webpack.test.js');
+
+  config.set({
+
+    // base path that will be used to resolve all patterns (e.g. files, exclude)
+    basePath: '',
+
+    /*
+     * Frameworks to use
+     *
+     * available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+     */
+    frameworks: ['jasmine'],
+
+    // list of files to exclude
+    exclude: [ ],
+
+    /*
+     * list of files / patterns to load in the browser
+     *
+     * we are building the test environment in ./spec-bundle.js
+     */
+    files: [ { pattern: './config/spec-bundle.js', watched: false } ],
+
+    /*
+     * preprocess matching files before serving them to the browser
+     * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+     */
+    preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
+
+    // Webpack Config at ./webpack.test.js
+    webpack: testWebpackConfig,
+
+    coverageReporter: {
+      dir : 'coverage/',
+      reporters: [
+        { type: 'text-summary' },
+        { type: 'json' },
+        { type: 'html' }
+      ]
+    },
+
+    // Webpack please don't spam the console when running in karma!
+    webpackServer: { noInfo: true },
+
+    /*
+     * test results reporter to use
+     *
+     * possible values: 'dots', 'progress'
+     * available reporters: https://npmjs.org/browse/keyword/karma-reporter
+     */
+    reporters: [ 'mocha', 'coverage' ],
+
+    // 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',
+      'PhantomJS'
+    ],
+
+    /*
+     * Continuous Integration mode
+     * if true, Karma captures browsers, runs the tests and exits
+     */
+    singleRun: true
+  });
+
+};

config/protractor.conf.js

@@ -0,0 +1,51 @@
+/**
+ * @author: @AngularClass
+ */
+
+require('ts-node/register');
+var helpers = require('./helpers');
+
+exports.config = {
+  baseUrl: 'http://localhost:3000/',
+
+  // use `npm run e2e`
+  specs: [
+    helpers.root('src/**/**.e2e.ts'),
+    helpers.root('src/**/*.e2e.ts')
+  ],
+  exclude: [],
+
+  framework: 'jasmine2',
+
+  allScriptsTimeout: 110000,
+
+  jasmineNodeOpts: {
+    showTiming: true,
+    showColors: true,
+    isVerbose: false,
+    includeStackTrace: false,
+    defaultTimeoutInterval: 400000
+  },
+  directConnect: true,
+
+  capabilities: {
+    'browserName': 'chrome',
+    'chromeOptions': {
+      'args': ['show-fps-counter=true']
+    }
+  },
+
+  onPrepare: function() {
+    browser.ignoreSynchronization = true;
+  },
+
+  seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.52.0.jar',
+
+  /**
+   * Angular 2 configuration
+   *
+   * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
+   * `rootEl`
+   */
+   useAllAngular2AppRoots: true
+};

config/spec-bundle.js

@@ -0,0 +1,59 @@
+/**
+ * @author: @AngularClass
+ */
+
+/*
+ * When testing with webpack and ES6, we have to do some extra
+ * things get testing to work right. Because we are gonna write test
+ * in ES6 to, we have to compile those as well. That's handled in
+ * karma.conf.js with the karma-webpack plugin. This is the entry
+ * file for webpack test. Just like webpack will create a bundle.js
+ * file for our client, when we run test, it well compile and bundle them
+ * all here! Crazy huh. So we need to do some setup
+ */
+Error.stackTraceLimit = Infinity;
+
+require('core-js');
+
+// Typescript emit helpers polyfill
+require('ts-helpers');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/jasmine-patch');
+
+// RxJS
+require('rxjs/Rx');
+
+var testing = require('angular2/testing');
+var browser = require('angular2/platform/testing/browser');
+
+testing.setBaseTestProviders(
+  browser.TEST_BROWSER_PLATFORM_PROVIDERS,
+  browser.TEST_BROWSER_APPLICATION_PROVIDERS
+);
+
+Object.assign(global, testing);
+
+/*
+ * Ok, this is kinda crazy. We can use the the context method on
+ * require that webpack created in order to tell webpack
+ * what files we actually want to require or import.
+ * Below, context will be an function/object with file names as keys.
+ * using that regex we are saying look in ./src/app and ./test then find
+ * any file that ends with spec.js and get its path. By passing in true
+ * we say do this recursively
+ */
+var testContext = require.context('../src', true, /\.spec\.ts/);
+
+/*
+ * get all the files, for each file, call the context function
+ * that will require the file and load it up here. Context will
+ * loop and require those spec files here
+ */
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+// requires and returns all modules that match
+var modules = requireAll(testContext);

config/webpack.common.js

@@ -0,0 +1,255 @@
+/**
+ * @author: @AngularClass
+ */
+
+const webpack = require('webpack');
+const helpers = require('./helpers');
+
+/*
+ * Webpack Plugins
+ */
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+
+/*
+ * Webpack Constants
+ */
+const METADATA = {
+  title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
+  baseUrl: '/'
+};
+
+/*
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = {
+
+  /*
+   * Static metadata for index.html
+   *
+   * See: (custom attribute)
+   */
+  metadata: METADATA,
+
+  /*
+   * Cache generated modules and chunks to improve performance for multiple incremental builds.
+   * This is enabled by default in watch mode.
+   * You can pass false to disable it.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#cache
+   * cache: false,
+   *
+   * The entry point for the bundle
+   * Our Angular.js app
+   *
+   * See: http://webpack.github.io/docs/configuration.html#entry
+   */
+  entry: {
+
+    'polyfills': './src/polyfills.ts',
+    'vendor': './src/vendor.ts',
+    'main': './src/main.browser.ts'
+
+  },
+
+  /*
+   * Options affecting the resolving of modules.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#resolve
+   */
+  resolve: {
+
+    /*
+     * An array of extensions that should be used to resolve modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+     */
+    extensions: ['', '.ts', '.js'],
+
+    // Make sure root is src
+    root: helpers.root('src'),
+
+    // remove other default values
+    modulesDirectories: ['node_modules']
+
+  },
+
+  /*
+   * Options affecting the normal modules.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#module
+   */
+  module: {
+
+    /*
+     * An array of applied pre and post loaders.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
+     */
+    preLoaders: [
+
+      /*
+       * Tslint loader support for *.ts files
+       *
+       * See: https://github.com/wbuchwalter/tslint-loader
+       */
+       // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
+
+      /*
+       * Source map loader support for *.js files
+       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+       *
+       * See: https://github.com/webpack/source-map-loader
+       */
+      {
+        test: /\.js$/,
+        loader: 'source-map-loader',
+        exclude: [
+          // these packages have problems with their sourcemaps
+          helpers.root('node_modules/rxjs'),
+          helpers.root('node_modules/@angular2-material')
+        ]
+      }
+
+    ],
+
+    /*
+     * An array of automatically applied loaders.
+     *
+     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
+     * This means they are not resolved relative to the configuration file.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module-loaders
+     */
+    loaders: [
+
+      /*
+       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+       *
+       * See: https://github.com/s-panferov/awesome-typescript-loader
+       */
+      {
+        test: /\.ts$/,
+        loader: 'awesome-typescript-loader',
+        exclude: [/\.(spec|e2e)\.ts$/]
+      },
+
+      /*
+       * Json loader support for *.json files.
+       *
+       * See: https://github.com/webpack/json-loader
+       */
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+
+      /*
+       * Raw loader support for *.css files
+       * Returns file content as string
+       *
+       * See: https://github.com/webpack/raw-loader
+       */
+      {
+        test: /\.css$/,
+        loader: 'raw-loader'
+      },
+
+      /* Raw loader support for *.html
+       * Returns file content as string
+       *
+       * See: https://github.com/webpack/raw-loader
+       */
+      {
+        test: /\.html$/,
+        loader: 'raw-loader',
+        exclude: [helpers.root('src/index.html')]
+      }
+
+    ]
+
+  },
+
+  /*
+   * Add additional plugins to the compiler.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#plugins
+   */
+  plugins: [
+
+    /*
+     * Plugin: ForkCheckerPlugin
+     * Description: Do type checking in a separate process, so webpack don't need to wait.
+     *
+     * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
+     */
+    new ForkCheckerPlugin(),
+
+    /*
+     * Plugin: OccurenceOrderPlugin
+     * Description: Varies the distribution of the ids to get the smallest id length
+     * for often used ids.
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
+     * See: https://github.com/webpack/docs/wiki/optimization#minimize
+     */
+    new webpack.optimize.OccurenceOrderPlugin(true),
+
+    /*
+     * Plugin: CommonsChunkPlugin
+     * Description: Shares common code between the pages.
+     * It identifies common modules and put them into a commons chunk.
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+     * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
+     */
+    new webpack.optimize.CommonsChunkPlugin({
+      name: helpers.reverse(['polyfills', 'vendor'])
+    }),
+
+    /*
+     * Plugin: CopyWebpackPlugin
+     * Description: Copy files and directories in webpack.
+     *
+     * Copies project static assets.
+     *
+     * See: https://www.npmjs.com/package/copy-webpack-plugin
+     */
+    new CopyWebpackPlugin([{
+      from: 'src/assets',
+      to: 'assets'
+    }]),
+
+    /*
+     * Plugin: HtmlWebpackPlugin
+     * Description: Simplifies creation of HTML files to serve your webpack bundles.
+     * This is especially useful for webpack bundles that include a hash in the filename
+     * which changes every compilation.
+     *
+     * See: https://github.com/ampedandwired/html-webpack-plugin
+     */
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+      chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
+    })
+
+  ],
+
+  /*
+   * Include polyfills or mocks for various node stuff
+   * Description: Node configuration
+   *
+   * See: https://webpack.github.io/docs/configuration.html#node
+   */
+  node: {
+    global: 'window',
+    crypto: 'empty',
+    module: false,
+    clearImmediate: false,
+    setImmediate: false
+  }
+
+};

config/webpack.dev.js

@@ -0,0 +1,162 @@
+/**
+ * @author: @AngularClass
+ */
+
+const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge'); // used to merge webpack configs
+const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
+
+/**
+ * Webpack Plugins
+ */
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+const HMR = helpers.hasProcessFlag('hot');
+const METADATA = webpackMerge(commonConfig.metadata, {
+  host: 'localhost',
+  port: 3000,
+  ENV: ENV,
+  HMR: HMR
+});
+
+/**
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = webpackMerge(commonConfig, {
+
+  /**
+   * Merged metadata from webpack.common.js for index.html
+   *
+   * See: (custom attribute)
+   */
+  metadata: METADATA,
+
+  /**
+   * Switch loaders to debug mode.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#debug
+   */
+  debug: true,
+
+  /**
+   * Developer tool to enhance debugging
+   *
+   * See: http://webpack.github.io/docs/configuration.html#devtool
+   * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
+   */
+  devtool: 'cheap-module-eval-source-map',
+
+  /**
+   * Options affecting the output of the compilation.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#output
+   */
+  output: {
+
+    /**
+     * The output directory as absolute path (required).
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-path
+     */
+    path: helpers.root('dist'),
+
+    /**
+     * Specifies the name of each output file on disk.
+     * IMPORTANT: You must not specify an absolute path here!
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-filename
+     */
+    filename: '[name].bundle.js',
+
+    /**
+     * The filename of the SourceMaps for the JavaScript files.
+     * They are inside the output.path directory.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+     */
+    sourceMapFilename: '[name].map',
+
+    /** The filename of non-entry chunks as relative path
+     * inside the output.path directory.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+     */
+    chunkFilename: '[id].chunk.js'
+
+  },
+
+  plugins: [
+
+    /**
+     * Plugin: DefinePlugin
+     * Description: Define free variables.
+     * Useful for having development builds with debug logging or adding global constants.
+     *
+     * Environment helpers
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+     */
+    // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
+    new DefinePlugin({
+      'ENV': JSON.stringify(METADATA.ENV),
+      'HMR': METADATA.HMR,
+      'process.env': {
+        'ENV': JSON.stringify(METADATA.ENV),
+        'NODE_ENV': JSON.stringify(METADATA.ENV),
+        'HMR': METADATA.HMR,
+      }
+    })
+  ],
+
+  /**
+   * Static analysis linter for TypeScript advanced options configuration
+   * Description: An extensible linter for the TypeScript language.
+   *
+   * See: https://github.com/wbuchwalter/tslint-loader
+   */
+  tslint: {
+    emitErrors: false,
+    failOnHint: false,
+    resourcePath: 'src'
+  },
+
+  /**
+   * Webpack Development Server configuration
+   * Description: The webpack-dev-server is a little node.js Express server.
+   * The server emits information about the compilation state to the client,
+   * which reacts to those events.
+   *
+   * See: https://webpack.github.io/docs/webpack-dev-server.html
+   */
+  devServer: {
+    port: METADATA.port,
+    host: METADATA.host,
+    historyApiFallback: true,
+    watchOptions: {
+      aggregateTimeout: 300,
+      poll: 1000
+    }
+  },
+
+  /*
+   * Include polyfills or mocks for various node stuff
+   * Description: Node configuration
+   *
+   * See: https://webpack.github.io/docs/configuration.html#node
+   */
+  node: {
+    global: 'window',
+    crypto: 'empty',
+    process: true,
+    module: false,
+    clearImmediate: false,
+    setImmediate: false
+  }
+
+});

config/webpack.prod.js

@@ -0,0 +1,230 @@
+/**
+ * @author: @AngularClass
+ */
+
+const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge'); // used to merge webpack configs
+const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
+
+/**
+ * Webpack Plugins
+ */
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const WebpackMd5Hash = require('webpack-md5-hash');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || 8080;
+const METADATA = webpackMerge(commonConfig.metadata, {
+  host: HOST,
+  port: PORT,
+  ENV: ENV,
+  HMR: false
+});
+
+module.exports = webpackMerge(commonConfig, {
+
+  /**
+   * Switch loaders to debug mode.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#debug
+   */
+  debug: false,
+
+  /**
+   * Developer tool to enhance debugging
+   *
+   * See: http://webpack.github.io/docs/configuration.html#devtool
+   * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
+   */
+  devtool: 'source-map',
+
+  /**
+   * Options affecting the output of the compilation.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#output
+   */
+  output: {
+
+    /**
+     * The output directory as absolute path (required).
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-path
+     */
+    path: helpers.root('dist'),
+
+    /**
+     * Specifies the name of each output file on disk.
+     * IMPORTANT: You must not specify an absolute path here!
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-filename
+     */
+    filename: '[name].[chunkhash].bundle.js',
+
+    /**
+     * The filename of the SourceMaps for the JavaScript files.
+     * They are inside the output.path directory.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+     */
+    sourceMapFilename: '[name].[chunkhash].bundle.map',
+
+    /**
+     * The filename of non-entry chunks as relative path
+     * inside the output.path directory.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+     */
+    chunkFilename: '[id].[chunkhash].chunk.js'
+
+  },
+
+  /**
+   * Add additional plugins to the compiler.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#plugins
+   */
+  plugins: [
+
+    /**
+     * Plugin: WebpackMd5Hash
+     * Description: Plugin to replace a standard webpack chunkhash with md5.
+     *
+     * See: https://www.npmjs.com/package/webpack-md5-hash
+     */
+    new WebpackMd5Hash(),
+
+    /**
+     * Plugin: DedupePlugin
+     * Description: Prevents the inclusion of duplicate code into your bundle
+     * and instead applies a copy of the function at runtime.
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+     * See: https://github.com/webpack/docs/wiki/optimization#deduplication
+     */
+    new DedupePlugin(),
+
+    /**
+     * Plugin: DefinePlugin
+     * Description: Define free variables.
+     * Useful for having development builds with debug logging or adding global constants.
+     *
+     * Environment helpers
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+     */
+    // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+    new DefinePlugin({
+      'ENV': JSON.stringify(METADATA.ENV),
+      'HMR': METADATA.HMR,
+      'process.env': {
+        'ENV': JSON.stringify(METADATA.ENV),
+        'NODE_ENV': JSON.stringify(METADATA.ENV),
+        'HMR': METADATA.HMR,
+      }
+    }),
+
+    /**
+     * Plugin: UglifyJsPlugin
+     * Description: Minimize all JavaScript output of chunks.
+     * Loaders are switched into minimizing mode.
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+     */
+    // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
+    new UglifyJsPlugin({
+      // beautify: true, //debug
+      // mangle: false, //debug
+      // dead_code: false, //debug
+      // unused: false, //debug
+      // deadCode: false, //debug
+      // compress: {
+      //   screw_ie8: true,
+      //   keep_fnames: true,
+      //   drop_debugger: false,
+      //   dead_code: false,
+      //   unused: false
+      // }, // debug
+      // comments: true, //debug
+
+      beautify: false, //prod
+
+      mangle: {
+        screw_ie8 : true,
+        keep_fnames: true
+      }, //prod
+
+      compress: {
+        screw_ie8: true
+      }, //prod
+
+      comments: false //prod
+    }),
+
+    /**
+     * Plugin: CompressionPlugin
+     * Description: Prepares compressed versions of assets to serve
+     * them with Content-Encoding
+     *
+     * See: https://github.com/webpack/compression-webpack-plugin
+     */
+    new CompressionPlugin({
+      regExp: /\.css$|\.html$|\.js$|\.map$/,
+      threshold: 2 * 1024
+    })
+
+  ],
+
+  /**
+   * Static analysis linter for TypeScript advanced options configuration
+   * Description: An extensible linter for the TypeScript language.
+   *
+   * See: https://github.com/wbuchwalter/tslint-loader
+   */
+  tslint: {
+    emitErrors: true,
+    failOnHint: true,
+    resourcePath: 'src'
+  },
+
+  /**
+   * Html loader advanced options
+   *
+   * See: https://github.com/webpack/html-loader#advanced-options
+   */
+  // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
+  htmlLoader: {
+    minimize: true,
+    removeAttributeQuotes: false,
+    caseSensitive: true,
+    customAttrSurround: [
+      [/#/, /(?:)/],
+      [/\*/, /(?:)/],
+      [/\[?\(?/, /(?:)/]
+    ],
+    customAttrAssign: [/\)?\]?=/]
+  },
+
+  /*
+   * Include polyfills or mocks for various node stuff
+   * Description: Node configuration
+   *
+   * See: https://webpack.github.io/docs/configuration.html#node
+   */
+  node: {
+    global: 'window',
+    crypto: 'empty',
+    process: false,
+    module: false,
+    clearImmediate: false,
+    setImmediate: false
+  }
+
+});

config/webpack.test.js

@@ -0,0 +1,233 @@
+/**
+ * @author: @AngularClass
+ */
+
+const helpers = require('./helpers');
+
+/**
+ * Webpack Plugins
+ */
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
+
+/**
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = {
+
+  /**
+   * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
+   *
+   * Do not change, leave as is or it wont work.
+   * See: https://github.com/webpack/karma-webpack#source-maps
+   */
+  devtool: 'inline-source-map',
+
+  /**
+   * Options affecting the resolving of modules.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#resolve
+   */
+  resolve: {
+
+    /**
+     * An array of extensions that should be used to resolve modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+     */
+    extensions: ['', '.ts', '.js'],
+
+    /**
+     * Make sure root is src
+     */
+    root: helpers.root('src'),
+
+  },
+
+  /**
+   * Options affecting the normal modules.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#module
+   */
+  module: {
+
+    /**
+     * An array of applied pre and post loaders.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
+     */
+    preLoaders: [
+
+      /**
+       * Tslint loader support for *.ts files
+       *
+       * See: https://github.com/wbuchwalter/tslint-loader
+       */
+      {
+        test: /\.ts$/,
+        loader: 'tslint-loader',
+        exclude: [helpers.root('node_modules')]
+      },
+
+      /**
+       * Source map loader support for *.js files
+       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+       *
+       * See: https://github.com/webpack/source-map-loader
+       */
+      {
+        test: /\.js$/,
+        loader: 'source-map-loader',
+        exclude: [
+        // these packages have problems with their sourcemaps
+        helpers.root('node_modules/rxjs'),
+        helpers.root('node_modules/@angular2-material')
+      ]}
+
+    ],
+
+    /**
+     * An array of automatically applied loaders.
+     *
+     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
+     * This means they are not resolved relative to the configuration file.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module-loaders
+     */
+    loaders: [
+
+      /**
+       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+       *
+       * See: https://github.com/s-panferov/awesome-typescript-loader
+       */
+      {
+        test: /\.ts$/,
+        loader: 'awesome-typescript-loader',
+        query: {
+          compilerOptions: {
+
+            // Remove TypeScript helpers to be injected
+            // below by DefinePlugin
+            removeComments: true
+
+          }
+        },
+        exclude: [/\.e2e\.ts$/]
+      },
+
+      /**
+       * Json loader support for *.json files.
+       *
+       * See: https://github.com/webpack/json-loader
+       */
+      { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] },
+
+      /**
+       * Raw loader support for *.css files
+       * Returns file content as string
+       *
+       * See: https://github.com/webpack/raw-loader
+       */
+      { test: /\.css$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] },
+
+      /**
+       * Raw loader support for *.html
+       * Returns file content as string
+       *
+       * See: https://github.com/webpack/raw-loader
+       */
+      { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }
+
+    ],
+
+    /**
+     * An array of applied pre and post loaders.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
+     */
+    postLoaders: [
+
+      /**
+       * Instruments JS files with Istanbul for subsequent code coverage reporting.
+       * Instrument only testing sources.
+       *
+       * See: https://github.com/deepsweet/istanbul-instrumenter-loader
+       */
+      {
+        test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader',
+        include: helpers.root('src'),
+        exclude: [
+          /\.(e2e|spec)\.ts$/,
+          /node_modules/
+        ]
+      }
+
+    ]
+  },
+
+  /**
+   * Add additional plugins to the compiler.
+   *
+   * See: http://webpack.github.io/docs/configuration.html#plugins
+   */
+  plugins: [
+
+    /**
+     * Plugin: DefinePlugin
+     * Description: Define free variables.
+     * Useful for having development builds with debug logging or adding global constants.
+     *
+     * Environment helpers
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+     */
+    // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+    new DefinePlugin({
+      'ENV': JSON.stringify(ENV),
+      'HMR': false,
+      'process.env': {
+        'ENV': JSON.stringify(ENV),
+        'NODE_ENV': JSON.stringify(ENV),
+        'HMR': false,
+      }
+    }),
+
+
+  ],
+
+  /**
+   * Static analysis linter for TypeScript advanced options configuration
+   * Description: An extensible linter for the TypeScript language.
+   *
+   * See: https://github.com/wbuchwalter/tslint-loader
+   */
+  tslint: {
+    emitErrors: false,
+    failOnHint: false,
+    resourcePath: 'src'
+  },
+
+  /**
+   * Include polyfills or mocks for various node stuff
+   * Description: Node configuration
+   *
+   * See: https://webpack.github.io/docs/configuration.html#node
+   */
+  node: {
+    global: 'window',
+    process: false,
+    crypto: 'empty',
+    module: false,
+    clearImmediate: false,
+    setImmediate: false
+  }
+
+};