<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
I'm subscribing to queryParam changes in a component in order to update and save the app state based on it. Clicking on links, which points to the different states works fine. Using the browsers back button for getting the prev. state does not work in IE11 and Safari.</p>
<p dir="auto">When I'm using the browser back button in IE 11 or Safari the code in my component get's executed, but not reflected in the DOM. When I run the changes inside the NgZone.run(callback) callback function, it get's reflected.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Changes should get reflected in the DOM as happening in all the other browsers.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<ul dir="auto">
<li>Open your DevTools console</li>
<li>Click through the list randomly and take a look at the URL (?selectedIndex=1)</li>
<li>Use the browser's back button to get back to the prev. state and monitor the logging in the console.</li>
<li>The code gets executed but not reflected in the browsers DOM</li>
</ul>
<p dir="auto"><a href="http://plnkr.co/edit/2sTW28Ql6Vq8GxtT22ne?p=preview" rel="nofollow">http://plnkr.co/edit/2sTW28Ql6Vq8GxtT22ne?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
A consistent behaviour through all the 'modern' browsers</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> [  IE 11 | Safari 9.1.1 ]</li>
<li><strong>Language:</strong> [ TypeScript 1.8.10 / ES5 ]</li>
</ul>
<p dir="auto">Getting the below error.</p>
<blockquote>
<p dir="auto">ERROR in ./src/app/+dashboard/+analytics/analytics.component.ts<br>
Module not found: Error: Can't resolve './dashboard/dashboard' in 'D:\MySample\web\src\mysample\src\app+dashboard+analytics'<br>
@ ./src/app/+dashboard/+analytics/analytics.component.ts 17:18-50<br>
@ ./src/app/+dashboard/+analytics/analytics.module.ts<br>
@ ./src/app/+dashboard/dashboard.routing.ts<br>
@ ./src/app/+dashboard/dashboard.module.ts<br>
@ ./src/app/app.routing.ts<br>
@ ./src/app/app.module.ts<br>
@ ./src/main.browser.ts</p>
<p dir="auto">ERROR in ./src/app/+auth/+login/login.component.ts<br>
Module not found: Error: Can't resolve './account/login' in 'D:\MySample\web\src\mysample.Web\src\app+auth+login'<br>
@ ./src/app/+auth/+login/login.component.ts 20:18-44<br>
@ ./src/app/+auth/+login/login.module.ts<br>
@ ./src/app/+auth/auth.routing.ts<br>
@ ./src/app/+auth/auth.module.ts<br>
@ ./src/app/app.routing.ts<br>
@ ./src/app/app.module.ts<br>
@ ./src/main.browser.ts</p>
</blockquote>
<p dir="auto">This is webpack webpack common.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/**
 * @author: @AngularClass
 */

const webpack = require('webpack');
const helpers = require('./helpers');

/*
 * Webpack Plugins
 */
// problem with copy-webpack-plugin
const AssetsPlugin = require('assets-webpack-plugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

/*
 * Webpack Constants
 */
const HMR = helpers.hasProcessFlag('hot');
const METADATA = {
  title: 'Smartadmin Angular2 template',
  baseUrl: '/',
  isDevServer: helpers.isWebpackDevServer()
};

/*
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = function (options) {
  isProd = options.env === 'production';
  return {

    /*
     * 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.browser.ts',
      'vendor':    './src/vendor.browser.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', '.json'],

      // An array of directory names to be resolved to the current directory
      modules: [helpers.root('src'), helpers.root('node_modules')],

    },

    /*
     * Options affecting the normal modules.
     *
     * See: http://webpack.github.io/docs/configuration.html#module
     */
    module: {

      rules: [

        /*
         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
         * Replace templateUrl and stylesUrl with require()
         *
         * See: https://github.com/s-panferov/awesome-typescript-loader
         * See: https://github.com/TheLarkInn/angular2-template-loader
         */
        {
          test: /\.ts$/,
          use: [
            '@angularclass/hmr-loader?pretty=' + !isProd + '&amp;prod=' + isProd,
            'awesome-typescript-loader',
            'angular2-template-loader',
            'angular-router-loader'
          ],
          exclude: [/\.(spec|e2e)\.ts$/]
        },

        /*
         * Json loader support for *.json files.
         *
         * See: https://github.com/webpack/json-loader
         */
        {
          test: /\.json$/,
          use: 'json-loader'
        },

        /*
         * to string and css loader support for *.css files
         * Returns file content as string
         *
         */
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader']
        },

        /* Raw loader support for *.html
         * Returns file content as string
         *
         * See: https://github.com/webpack/raw-loader
         */
        {
          test: /\.html$/,
          use: ['raw-loader'].concat(isProd ? [
            // @todo minify templates
          ] : []),
          exclude: [helpers.root('src/index.html')]
        },

        /* File loader for supporting images, for example, in CSS files.
         */
        {
          test: /\.(jpg|png|gif)$/,
          use: 'file-loader'
        },

      ],

    },

    /*
     * Add additional plugins to the compiler.
     *
     * See: http://webpack.github.io/docs/configuration.html#plugins
     */
    plugins: [
      new AssetsPlugin({
        path: helpers.root('wwwroot'),
        filename: 'webpack-assets.json',
        prettyPrint: true
      }),

      /*
       * 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: 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 CommonsChunkPlugin({
        name: ['polyfills', 'vendor'].reverse()
      }),

      /**
       * Plugin: ContextReplacementPlugin
       * Description: Provides context to Angular's use of System.import
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
       * See: https://github.com/angular/angular/issues/11580
       */
      new ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
        helpers.root('src'), // location of your src
        {
          // your Angular Async Route paths relative to this root directory
        }
      ),

      /*
       * 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' },
        { from: 'src/meta'}
      ]),


      /*
       * 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',
      //////  title: METADATA.title,
      //////  chunksSortMode: 'dependency',
      //////  metadata: METADATA,
      //////  inject: 'head',
      //////  filename:&quot;../Views/Shared/_Layout.cshtml&quot;
      //////}),

      /*
       * Plugin: ScriptExtHtmlWebpackPlugin
       * Description: Enhances html-webpack-plugin functionality
       * with different deployment options for your scripts including:
       *
       * See: https://github.com/numical/script-ext-html-webpack-plugin
       */
      new ScriptExtHtmlWebpackPlugin({
        defaultAttribute: 'defer'
      }),

      /*
       * Plugin: HtmlElementsPlugin
       * Description: Generate html tags based on javascript maps.
       *
       * If a publicPath is set in the webpack output configuration, it will be automatically added to
       * href attributes, you can disable that by adding a &quot;=href&quot;: false property.
       * You can also enable it to other attribute by settings &quot;=attName&quot;: true.
       *
       * The configuration supplied is map between a location (key) and an element definition object (value)
       * The location (key) is then exported to the template under then htmlElements property in webpack configuration.
       *
       * Example:
       *  Adding this plugin configuration
       *  new HtmlElementsPlugin({
       *    headTags: { ... }
       *  })
       *
       *  Means we can use it in the template like this:
       *  &lt;%= webpackConfig.htmlElements.headTags %&gt;
       *
       * Dependencies: HtmlWebpackPlugin
       */
      new HtmlElementsPlugin({
      }),

      /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({}),

      // Fix Angular 2
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)async/,
        helpers.root('node_modules/@angular/core/src/facade/async.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)collection/,
        helpers.root('node_modules/@angular/core/src/facade/collection.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)errors/,
        helpers.root('node_modules/@angular/core/src/facade/errors.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)lang/,
        helpers.root('node_modules/@angular/core/src/facade/lang.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)math/,
        helpers.root('node_modules/@angular/core/src/facade/math.js')
      ),
    ],

    /*
     * Include polyfills or mocks for various node stuff
     * Description: Node configuration
     *
     * See: https://webpack.github.io/docs/configuration.html#node
     */
    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    },


    performance: {
      hints: false
    },

    stats: {
      assets: true,
      chunks: true,
      errors: true,
    }
  };
}
"><pre class="notranslate"><code class="notranslate">/**
 * @author: @AngularClass
 */

const webpack = require('webpack');
const helpers = require('./helpers');

/*
 * Webpack Plugins
 */
// problem with copy-webpack-plugin
const AssetsPlugin = require('assets-webpack-plugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

/*
 * Webpack Constants
 */
const HMR = helpers.hasProcessFlag('hot');
const METADATA = {
  title: 'Smartadmin Angular2 template',
  baseUrl: '/',
  isDevServer: helpers.isWebpackDevServer()
};

/*
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = function (options) {
  isProd = options.env === 'production';
  return {

    /*
     * 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.browser.ts',
      'vendor':    './src/vendor.browser.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', '.json'],

      // An array of directory names to be resolved to the current directory
      modules: [helpers.root('src'), helpers.root('node_modules')],

    },

    /*
     * Options affecting the normal modules.
     *
     * See: http://webpack.github.io/docs/configuration.html#module
     */
    module: {

      rules: [

        /*
         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
         * Replace templateUrl and stylesUrl with require()
         *
         * See: https://github.com/s-panferov/awesome-typescript-loader
         * See: https://github.com/TheLarkInn/angular2-template-loader
         */
        {
          test: /\.ts$/,
          use: [
            '@angularclass/hmr-loader?pretty=' + !isProd + '&amp;prod=' + isProd,
            'awesome-typescript-loader',
            'angular2-template-loader',
            'angular-router-loader'
          ],
          exclude: [/\.(spec|e2e)\.ts$/]
        },

        /*
         * Json loader support for *.json files.
         *
         * See: https://github.com/webpack/json-loader
         */
        {
          test: /\.json$/,
          use: 'json-loader'
        },

        /*
         * to string and css loader support for *.css files
         * Returns file content as string
         *
         */
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader']
        },

        /* Raw loader support for *.html
         * Returns file content as string
         *
         * See: https://github.com/webpack/raw-loader
         */
        {
          test: /\.html$/,
          use: ['raw-loader'].concat(isProd ? [
            // @todo minify templates
          ] : []),
          exclude: [helpers.root('src/index.html')]
        },

        /* File loader for supporting images, for example, in CSS files.
         */
        {
          test: /\.(jpg|png|gif)$/,
          use: 'file-loader'
        },

      ],

    },

    /*
     * Add additional plugins to the compiler.
     *
     * See: http://webpack.github.io/docs/configuration.html#plugins
     */
    plugins: [
      new AssetsPlugin({
        path: helpers.root('wwwroot'),
        filename: 'webpack-assets.json',
        prettyPrint: true
      }),

      /*
       * 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: 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 CommonsChunkPlugin({
        name: ['polyfills', 'vendor'].reverse()
      }),

      /**
       * Plugin: ContextReplacementPlugin
       * Description: Provides context to Angular's use of System.import
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
       * See: https://github.com/angular/angular/issues/11580
       */
      new ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
        helpers.root('src'), // location of your src
        {
          // your Angular Async Route paths relative to this root directory
        }
      ),

      /*
       * 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' },
        { from: 'src/meta'}
      ]),


      /*
       * 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',
      //////  title: METADATA.title,
      //////  chunksSortMode: 'dependency',
      //////  metadata: METADATA,
      //////  inject: 'head',
      //////  filename:"../Views/Shared/_Layout.cshtml"
      //////}),

      /*
       * Plugin: ScriptExtHtmlWebpackPlugin
       * Description: Enhances html-webpack-plugin functionality
       * with different deployment options for your scripts including:
       *
       * See: https://github.com/numical/script-ext-html-webpack-plugin
       */
      new ScriptExtHtmlWebpackPlugin({
        defaultAttribute: 'defer'
      }),

      /*
       * Plugin: HtmlElementsPlugin
       * Description: Generate html tags based on javascript maps.
       *
       * If a publicPath is set in the webpack output configuration, it will be automatically added to
       * href attributes, you can disable that by adding a "=href": false property.
       * You can also enable it to other attribute by settings "=attName": true.
       *
       * The configuration supplied is map between a location (key) and an element definition object (value)
       * The location (key) is then exported to the template under then htmlElements property in webpack configuration.
       *
       * Example:
       *  Adding this plugin configuration
       *  new HtmlElementsPlugin({
       *    headTags: { ... }
       *  })
       *
       *  Means we can use it in the template like this:
       *  &lt;%= webpackConfig.htmlElements.headTags %&gt;
       *
       * Dependencies: HtmlWebpackPlugin
       */
      new HtmlElementsPlugin({
      }),

      /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({}),

      // Fix Angular 2
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)async/,
        helpers.root('node_modules/@angular/core/src/facade/async.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)collection/,
        helpers.root('node_modules/@angular/core/src/facade/collection.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)errors/,
        helpers.root('node_modules/@angular/core/src/facade/errors.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)lang/,
        helpers.root('node_modules/@angular/core/src/facade/lang.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)math/,
        helpers.root('node_modules/@angular/core/src/facade/math.js')
      ),
    ],

    /*
     * Include polyfills or mocks for various node stuff
     * Description: Node configuration
     *
     * See: https://webpack.github.io/docs/configuration.html#node
     */
    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    },


    performance: {
      hints: false
    },

    stats: {
      assets: true,
      chunks: true,
      errors: true,
    }
  };
}

</code></pre></div>
<p dir="auto"><strong>### This is the webpack dev.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
/**
 * @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');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

/**
 * Webpack Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 4200;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR
});

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = function (options) {
  return webpackMerge(commonConfig({env: ENV}), {

    /**
     * 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-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('wwwroot'),

      /**
       * 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: 'js/[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: 'js/[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: 'js/[id].chunk.js',

      library: 'ac_[name]',
      libraryTarget: 'var',
    },

    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,
        }
      }),

      /**
       * Plugin: NamedModulesPlugin (experimental)
       * Description: Uses file names as module name.
       *
       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
       */
      // new NamedModulesPlugin(),

      /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({
        debug: true,
        options: {

        }
      }),

    ],

    /**
     * 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: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }

  });
}
"><pre class="notranslate"><code class="notranslate">
/**
 * @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');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

/**
 * Webpack Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 4200;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR
});

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = function (options) {
  return webpackMerge(commonConfig({env: ENV}), {

    /**
     * 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-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('wwwroot'),

      /**
       * 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: 'js/[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: 'js/[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: 'js/[id].chunk.js',

      library: 'ac_[name]',
      libraryTarget: 'var',
    },

    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,
        }
      }),

      /**
       * Plugin: NamedModulesPlugin (experimental)
       * Description: Uses file names as module name.
       *
       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
       */
      // new NamedModulesPlugin(),

      /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({
        debug: true,
        options: {

        }
      }),

    ],

    /**
     * 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: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }

  });
}

</code></pre></div>
<p dir="auto"><strong>### Package.json file</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;mysample&quot;,
  &quot;version&quot;: &quot;0.2.1&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;scripts&quot;: {
    &quot;build:dev&quot;: &quot;./node_modules/.bin/webpack --config config/webpack.dev.js --progress --profile&quot;,
    &quot;build:prod&quot;: &quot;./node_modules/.bin/webpack --config config/webpack.prod.js  --progress --profile --bail&quot;,
    &quot;build&quot;: &quot;npm run build:dev&quot;,
    &quot;ci&quot;: &quot;npm run lint &amp;&amp; npm test &amp;&amp; npm run e2e&quot;,
    &quot;clean:dist&quot;: &quot;npm run rimraf -- dist&quot;,
    &quot;clean:install&quot;: &quot;npm set progress=false &amp;&amp; npm install&quot;,
    &quot;clean:start&quot;: &quot;npm start&quot;,
    &quot;clean&quot;: &quot;npm cache clean &amp;&amp; npm run rimraf -- node_modules doc coverage dist&quot;,
    &quot;docs&quot;: &quot;npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/&quot;,
    &quot;e2e:live&quot;: &quot;npm run e2e -- --elementExplorer&quot;,
    &quot;e2e&quot;: &quot;npm run protractor&quot;,
    &quot;github-deploy:dev&quot;: &quot;./node_modules/.bin/webpack --config config/webpack.github-deploy.js --progress --profile --env.githubDev&quot;,
    &quot;github-deploy:prod&quot;: &quot;./node_modules/.bin/webpack --config config/webpack.github-deploy.js --progress --profile --env.githubProd&quot;,
    &quot;github-deploy&quot;: &quot;npm run github-deploy:dev&quot;,
    &quot;lint&quot;: &quot;npm run tslint \&quot;src/**/*.ts\&quot;&quot;,
    &quot;postversion&quot;: &quot;git push &amp;&amp; git push --tags&quot;,
    &quot;prebuild:dev&quot;: &quot;npm run clean:dist&quot;,
    &quot;prebuild:prod&quot;: &quot;npm run clean:dist&quot;,
    &quot;preclean:install&quot;: &quot;npm run clean&quot;,
    &quot;preclean:start&quot;: &quot;npm run clean&quot;,
    &quot;pree2e&quot;: &quot;npm run webdriver:update -- --standalone&quot;,
    &quot;preversion&quot;: &quot;npm test&quot;,
    &quot;protractor&quot;: &quot;protractor&quot;,
    &quot;rimraf&quot;: &quot;rimraf&quot;,
    &quot;server:dev:hmr&quot;: &quot;npm run server:dev -- --inline --hot&quot;,
    &quot;server:dev&quot;: &quot;./node_modules/.bin/webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/&quot;,
    &quot;server&quot;: &quot;npm run server:dev&quot;,
    &quot;start:hmr&quot;: &quot;npm run server:dev:hmr&quot;,
    &quot;start&quot;: &quot;npm run server:dev&quot;,
    &quot;test&quot;: &quot;karma start config/karma&quot;,
    &quot;tslint&quot;: &quot;tslint&quot;,
    &quot;typedoc&quot;: &quot;typedoc&quot;,
    &quot;version&quot;: &quot;npm run build&quot;,
    &quot;watch:dev:hmr&quot;: &quot;npm run watch:dev -- --hot&quot;,
    &quot;watch:dev&quot;: &quot;npm run build:dev -- --watch&quot;,
    &quot;watch:prod&quot;: &quot;npm run build:prod -- --watch&quot;,
    &quot;watch:test&quot;: &quot;npm run test -- --auto-watch --no-single-run&quot;,
    &quot;watch&quot;: &quot;npm run watch:dev&quot;
  },
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@angular-redux/store&quot;: &quot;^6.0.0&quot;,
    &quot;@angular/common&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/compiler&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/core&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/forms&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/http&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/platform-browser&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;^2.4.6&quot;,
    &quot;@angular/router&quot;: &quot;^3.4.6&quot;,
    &quot;@types/jasmine&quot;: &quot;^2.5.41&quot;,
    &quot;X-editable&quot;: &quot;github:vitalets/x-editable&quot;,
    &quot;angular-in-memory-web-api&quot;: &quot;^0.2.1&quot;,
    &quot;bootstrap&quot;: &quot;^3.3.7&quot;,
    &quot;bootstrap-colorpicker&quot;: &quot;^2.3.5&quot;,
    &quot;bootstrap-duallistbox&quot;: &quot;github:istvan-ujjmeszaros/bootstrap-duallistbox&quot;,
    &quot;bootstrap-markdown&quot;: &quot;^2.10.0&quot;,
    &quot;bootstrap-progressbar&quot;: &quot;^0.9.0&quot;,
    &quot;bootstrap-slider&quot;: &quot;^9.1.3&quot;,
    &quot;bootstrap-tagsinput&quot;: &quot;^0.7.1&quot;,
    &quot;bootstrap-timepicker&quot;: &quot;^0.5.2&quot;,
    &quot;chart.js&quot;: &quot;2.4.0&quot;,
    &quot;clockpicker&quot;: &quot;0.0.7&quot;,
    &quot;clone&quot;: &quot;~2.0.0&quot;,
    &quot;codelyzer&quot;: &quot;^2.0.0-beta.4&quot;,
    &quot;debounce&quot;: &quot;^1.0.0&quot;,
    &quot;dropzone&quot;: &quot;^4.3.0&quot;,
    &quot;dygraphs&quot;: &quot;^2.0.0&quot;,
    &quot;fuelux&quot;: &quot;^3.15.8&quot;,
    &quot;he&quot;: &quot;^1.1.0&quot;,
    &quot;highcharts&quot;: &quot;^5.0.7&quot;,
    &quot;ion-rangeslider&quot;: &quot;^2.1.4&quot;,
    &quot;jasmine-core&quot;: &quot;^2.5.2&quot;,
    &quot;jquery&quot;: &quot;^2.2.4&quot;,
    &quot;jquery-color&quot;: &quot;^1.0.0&quot;,
    &quot;jquery-jcrop&quot;: &quot;^0.9.13&quot;,
    &quot;jquery-knob&quot;: &quot;^1.2.11&quot;,
    &quot;jquery-ui-npm&quot;: &quot;^1.12.0&quot;,
    &quot;jquery-validation&quot;: &quot;^1.15.1&quot;,
    &quot;jquery.maskedinput&quot;: &quot;^1.4.1&quot;,
    &quot;karma-jasmine&quot;: &quot;^1.1.0&quot;,
    &quot;markdown&quot;: &quot;^0.5.0&quot;,
    &quot;minimatch&quot;: &quot;^3.0.3&quot;,
    &quot;morris.js&quot;: &quot;^0.5.0&quot;,
    &quot;ng2-bootstrap&quot;: &quot;^1.1.16-9&quot;,
    &quot;ng2-redux&quot;: &quot;^5.0.0-beta.2&quot;,
    &quot;ngx-popover&quot;: &quot;0.0.16&quot;,
    &quot;nouislider&quot;: &quot;^8.5.1&quot;,
    &quot;raphael&quot;: &quot;^2.2.1&quot;,
    &quot;redux&quot;: &quot;^3.6.0&quot;,
    &quot;rxjs&quot;: &quot;^5.1.0&quot;,
    &quot;scriptjs&quot;: &quot;^2.5.8&quot;,
    &quot;select2&quot;: &quot;^4.0.3&quot;,
    &quot;smartadmin-plugins&quot;: &quot;^1.0.15&quot;,
    &quot;summernote&quot;: &quot;^0.8.1&quot;,
    &quot;to-markdown&quot;: &quot;^3.0.1&quot;,
    &quot;ts-helpers&quot;: &quot;^1.1.1&quot;,
    &quot;tslint&quot;: &quot;^4.0.0&quot;,
    &quot;tslint-loader&quot;: &quot;^3.2.1&quot;,
    &quot;webpack&quot;: &quot;^2.2.0-rc.3&quot;,
    &quot;zone.js&quot;: &quot;^0.7.2&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@angular/compiler&quot;: &quot;^2.4.6&quot;,
    &quot;@angularclass/hmr&quot;: &quot;~1.2.2&quot;,
    &quot;@angularclass/hmr-loader&quot;: &quot;~3.0.2&quot;,
    &quot;@types/hammerjs&quot;: &quot;^2.0.33&quot;,
    &quot;@types/jasmine&quot;: &quot;^2.5.41&quot;,
    &quot;@types/node&quot;: &quot;^6.0.38&quot;,
    &quot;@types/source-map&quot;: &quot;^0.1.27&quot;,
    &quot;@types/uglify-js&quot;: &quot;^2.0.27&quot;,
    &quot;@types/webpack&quot;: &quot;^1.12.34&quot;,
    &quot;angular-router-loader&quot;: &quot;^0.4.0&quot;,
    &quot;angular2-template-loader&quot;: &quot;^0.6.0&quot;,
    &quot;assets-webpack-plugin&quot;: &quot;^3.5.0&quot;,
    &quot;awesome-typescript-loader&quot;: &quot;^2.2.1&quot;,
    &quot;codelyzer&quot;: &quot;~1.0.0-beta.4&quot;,
    &quot;copy-webpack-plugin&quot;: &quot;^4.0.0&quot;,
    &quot;css-loader&quot;: &quot;^0.26.0&quot;,
    &quot;exports-loader&quot;: &quot;^0.6.3&quot;,
    &quot;expose-loader&quot;: &quot;^0.7.1&quot;,
    &quot;file-loader&quot;: &quot;^0.9.0&quot;,
    &quot;gh-pages&quot;: &quot;^0.12.0&quot;,
    &quot;html-minify-loader&quot;: &quot;^1.1.0&quot;,
    &quot;html-webpack-plugin&quot;: &quot;^2.21.0&quot;,
    &quot;ie-shim&quot;: &quot;^0.1.0&quot;,
    &quot;imports-loader&quot;: &quot;^0.6.5&quot;,
    &quot;istanbul-instrumenter-loader&quot;: &quot;0.2.0&quot;,
    &quot;json-loader&quot;: &quot;^0.5.4&quot;,
    &quot;karma&quot;: &quot;^1.2.0&quot;,
    &quot;karma-chrome-launcher&quot;: &quot;^2.0.0&quot;,
    &quot;karma-coverage&quot;: &quot;^1.1.1&quot;,
    &quot;karma-jasmine&quot;: &quot;^1.0.2&quot;,
    &quot;karma-mocha-reporter&quot;: &quot;^2.0.0&quot;,
    &quot;karma-remap-coverage&quot;: &quot;^0.1.1&quot;,
    &quot;karma-sourcemap-loader&quot;: &quot;^0.3.7&quot;,
    &quot;karma-webpack&quot;: &quot;1.8.0&quot;,
    &quot;parse5&quot;: &quot;^2.2.2&quot;,
    &quot;raw-loader&quot;: &quot;0.5.1&quot;,
    &quot;reflect-metadata&quot;: &quot;^0.1.9&quot;,
    &quot;rimraf&quot;: &quot;~2.5.4&quot;,
    &quot;script-ext-html-webpack-plugin&quot;: &quot;^1.3.2&quot;,
    &quot;script-loader&quot;: &quot;^0.7.0&quot;,
    &quot;source-map-loader&quot;: &quot;^0.1.5&quot;,
    &quot;string-replace-loader&quot;: &quot;1.0.5&quot;,
    &quot;style-loader&quot;: &quot;^0.13.1&quot;,
    &quot;to-string-loader&quot;: &quot;^1.1.4&quot;,
    &quot;ts-helpers&quot;: &quot;1.1.2&quot;,
    &quot;ts-node&quot;: &quot;^1.7.0&quot;,
    &quot;tslint&quot;: &quot;^4.0.0&quot;,
    &quot;tslint-loader&quot;: &quot;^3.2.1&quot;,
    &quot;typedoc&quot;: &quot;^0.5.0&quot;,
    &quot;typescript&quot;: &quot;2.1.1&quot;,
    &quot;url-loader&quot;: &quot;^0.5.7&quot;,
    &quot;v8-lazy-parse-webpack-plugin&quot;: &quot;^0.3.0&quot;,
    &quot;webpack&quot;: &quot;^2.2.1&quot;,
    &quot;webpack-dev-middleware&quot;: &quot;^1.10.0&quot;,
    &quot;webpack-dev-server&quot;: &quot;^2.3.0&quot;,
    &quot;webpack-md5-hash&quot;: &quot;^0.0.5&quot;,
    &quot;webpack-merge&quot;: &quot;^2.6.1&quot;
  },
  &quot;engines&quot;: {
    &quot;node&quot;: &quot;&gt;= 4.2.1&quot;,
    &quot;npm&quot;: &quot;&gt;= 3&quot;
  }
}
"><pre class="notranslate"><code class="notranslate">{
  "name": "mysample",
  "version": "0.2.1",
  "license": "ISC",
  "scripts": {
    "build:dev": "./node_modules/.bin/webpack --config config/webpack.dev.js --progress --profile",
    "build:prod": "./node_modules/.bin/webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "ci": "npm run lint &amp;&amp; npm test &amp;&amp; npm run e2e",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false &amp;&amp; npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean &amp;&amp; npm run rimraf -- node_modules doc coverage dist",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "github-deploy:dev": "./node_modules/.bin/webpack --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
    "github-deploy:prod": "./node_modules/.bin/webpack --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push &amp;&amp; git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "pree2e": "npm run webdriver:update -- --standalone",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "./node_modules/.bin/webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "test": "karma start config/karma",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^6.0.0",
    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/router": "^3.4.6",
    "@types/jasmine": "^2.5.41",
    "X-editable": "github:vitalets/x-editable",
    "angular-in-memory-web-api": "^0.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-colorpicker": "^2.3.5",
    "bootstrap-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox",
    "bootstrap-markdown": "^2.10.0",
    "bootstrap-progressbar": "^0.9.0",
    "bootstrap-slider": "^9.1.3",
    "bootstrap-tagsinput": "^0.7.1",
    "bootstrap-timepicker": "^0.5.2",
    "chart.js": "2.4.0",
    "clockpicker": "0.0.7",
    "clone": "~2.0.0",
    "codelyzer": "^2.0.0-beta.4",
    "debounce": "^1.0.0",
    "dropzone": "^4.3.0",
    "dygraphs": "^2.0.0",
    "fuelux": "^3.15.8",
    "he": "^1.1.0",
    "highcharts": "^5.0.7",
    "ion-rangeslider": "^2.1.4",
    "jasmine-core": "^2.5.2",
    "jquery": "^2.2.4",
    "jquery-color": "^1.0.0",
    "jquery-jcrop": "^0.9.13",
    "jquery-knob": "^1.2.11",
    "jquery-ui-npm": "^1.12.0",
    "jquery-validation": "^1.15.1",
    "jquery.maskedinput": "^1.4.1",
    "karma-jasmine": "^1.1.0",
    "markdown": "^0.5.0",
    "minimatch": "^3.0.3",
    "morris.js": "^0.5.0",
    "ng2-bootstrap": "^1.1.16-9",
    "ng2-redux": "^5.0.0-beta.2",
    "ngx-popover": "0.0.16",
    "nouislider": "^8.5.1",
    "raphael": "^2.2.1",
    "redux": "^3.6.0",
    "rxjs": "^5.1.0",
    "scriptjs": "^2.5.8",
    "select2": "^4.0.3",
    "smartadmin-plugins": "^1.0.15",
    "summernote": "^0.8.1",
    "to-markdown": "^3.0.1",
    "ts-helpers": "^1.1.1",
    "tslint": "^4.0.0",
    "tslint-loader": "^3.2.1",
    "webpack": "^2.2.0-rc.3",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler": "^2.4.6",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.38",
    "@types/source-map": "^0.1.27",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.34",
    "angular-router-loader": "^0.4.0",
    "angular2-template-loader": "^0.6.0",
    "assets-webpack-plugin": "^3.5.0",
    "awesome-typescript-loader": "^2.2.1",
    "codelyzer": "~1.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.12.0",
    "html-minify-loader": "^1.1.0",
    "html-webpack-plugin": "^2.21.0",
    "ie-shim": "^0.1.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "0.2.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-remap-coverage": "^0.1.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "parse5": "^2.2.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "^0.1.9",
    "rimraf": "~2.5.4",
    "script-ext-html-webpack-plugin": "^1.3.2",
    "script-loader": "^0.7.0",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.2",
    "ts-node": "^1.7.0",
    "tslint": "^4.0.0",
    "tslint-loader": "^3.2.1",
    "typedoc": "^0.5.0",
    "typescript": "2.1.1",
    "url-loader": "^0.5.7",
    "v8-lazy-parse-webpack-plugin": "^0.3.0",
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-dev-server": "^2.3.0",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^2.6.1"
  },
  "engines": {
    "node": "&gt;= 4.2.1",
    "npm": "&gt;= 3"
  }
}

</code></pre></div>
<p dir="auto"><strong>### TS config</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" {
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;module&quot;: &quot;commonjs&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;emitDecoratorMetadata&quot;: true,
    &quot;experimentalDecorators&quot;: true,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;sourceMap&quot;: true,
    &quot;noEmitHelpers&quot;: true,
    &quot;strictNullChecks&quot;: false,
    &quot;baseUrl&quot;: &quot;./src&quot;,
    &quot;paths&quot;: {
    },
    &quot;lib&quot;: [
      &quot;dom&quot;,
      &quot;es6&quot;
    ],
    &quot;types&quot;: [
      &quot;hammerjs&quot;,
      &quot;jasmine&quot;,
      &quot;node&quot;,      
      &quot;source-map&quot;,
      &quot;uglify-js&quot;,
      &quot;webpack&quot;
    ]
  },
  &quot;exclude&quot;: [
    &quot;node_modules&quot;,
    &quot;dist&quot;
  ],
  &quot;awesomeTypescriptLoaderOptions&quot;: {
    &quot;forkChecker&quot;: true,
    &quot;useWebpackText&quot;: true
  },
  &quot;compileOnSave&quot;: false,
  &quot;buildOnSave&quot;: false,
  &quot;atom&quot;: { &quot;rewriteTsconfig&quot;: false }**
}"><pre class="notranslate"><code class="notranslate"> {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "strictNullChecks": false,
    "baseUrl": "./src",
    "paths": {
    },
    "lib": [
      "dom",
      "es6"
    ],
    "types": [
      "hammerjs",
      "jasmine",
      "node",      
      "source-map",
      "uglify-js",
      "webpack"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }**
}
</code></pre></div>
<p dir="auto"><strong>### TS Lint File</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
{
  &quot;rulesDirectory&quot;: [
    &quot;node_modules/codelyzer&quot;
  ],
  &quot;rules&quot;: {
    &quot;member-access&quot;: false,
    &quot;member-ordering&quot;: [
      true,
      &quot;public-before-private&quot;,
      &quot;static-before-instance&quot;,
      &quot;variables-before-functions&quot;
    ],
    &quot;no-any&quot;: false,
    &quot;no-inferrable-types&quot;: false,
    &quot;no-internal-module&quot;: true,
    &quot;no-var-requires&quot;: false,
    &quot;typedef&quot;: false,
    &quot;typedef-whitespace&quot;: [
      true,
      {
        &quot;call-signature&quot;: &quot;nospace&quot;,
        &quot;index-signature&quot;: &quot;nospace&quot;,
        &quot;parameter&quot;: &quot;nospace&quot;,
        &quot;property-declaration&quot;: &quot;nospace&quot;,
        &quot;variable-declaration&quot;: &quot;nospace&quot;
      },
      {
        &quot;call-signature&quot;: &quot;space&quot;,
        &quot;index-signature&quot;: &quot;space&quot;,
        &quot;parameter&quot;: &quot;space&quot;,
        &quot;property-declaration&quot;: &quot;space&quot;,
        &quot;variable-declaration&quot;: &quot;space&quot;
      }
    ],

    &quot;ban&quot;: false,
    &quot;curly&quot;: false,
    &quot;forin&quot;: true,
    &quot;label-position&quot;: true,
    &quot;no-arg&quot;: true,
    &quot;no-bitwise&quot;: true,
    &quot;no-conditional-assignment&quot;: true,
    &quot;no-console&quot;: [
      true,
      &quot;debug&quot;,
      &quot;info&quot;,
      &quot;time&quot;,
      &quot;timeEnd&quot;,
      &quot;trace&quot;
    ],
    &quot;no-construct&quot;: true,
    &quot;no-debugger&quot;: true,
    &quot;no-duplicate-variable&quot;: true,
    &quot;no-empty&quot;: false,
    &quot;no-eval&quot;: true,
    &quot;no-null-keyword&quot;: false,
    &quot;no-shadowed-variable&quot;: true,
    &quot;no-string-literal&quot;: false,
    &quot;no-switch-case-fall-through&quot;: true,
    &quot;no-unreachable&quot;: true,
    &quot;no-unused-expression&quot;: true,
    &quot;no-unused-variable&quot;: false,
    &quot;no-use-before-declare&quot;: true,
    &quot;no-var-keyword&quot;: true,
    &quot;radix&quot;: true,
    &quot;switch-default&quot;: true,
    &quot;triple-equals&quot;: [
      true,
      &quot;allow-null-check&quot;
    ],
    &quot;eofline&quot;: true,
    &quot;indent&quot;: [
      true,
      &quot;spaces&quot;
    ],
    &quot;max-line-length&quot;: [
      true,
      100
    ],
    &quot;no-require-imports&quot;: false,
    &quot;no-trailing-whitespace&quot;: true,
    &quot;object-literal-sort-keys&quot;: false,
    &quot;trailing-comma&quot;: [
      true,
      {
        &quot;multiline&quot;: false,
        &quot;singleline&quot;: &quot;never&quot;
      }
    ],

    &quot;align&quot;: false,
    &quot;class-name&quot;: true,
    &quot;comment-format&quot;: [
      true,
      &quot;check-space&quot;
    ],
    &quot;interface-name&quot;: false,
    &quot;jsdoc-format&quot;: true,
    &quot;no-consecutive-blank-lines&quot;: false,
    &quot;one-line&quot;: [
      false,
      &quot;check-open-brace&quot;,
      &quot;check-catch&quot;,
      &quot;check-else&quot;,
      &quot;check-finally&quot;,
      &quot;check-whitespace&quot;
    ],
    &quot;quotemark&quot;: [
      true,
      &quot;single&quot;,
      &quot;avoid-escape&quot;
    ],
    &quot;semicolon&quot;: [true, &quot;always&quot;],
    &quot;variable-name&quot;: [
      true,
      &quot;check-format&quot;,
      &quot;allow-leading-underscore&quot;,
      &quot;ban-keywords&quot;
    ],
    &quot;whitespace&quot;: [
      true,
      &quot;check-branch&quot;,
      &quot;check-decl&quot;,
      &quot;check-operator&quot;,
      &quot;check-separator&quot;,
      &quot;check-type&quot;
    ],
    &quot;import-destructuring-spacing&quot;: true
  }
}
"><pre class="notranslate"><code class="notranslate">
{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "member-access": false,
    "member-ordering": [
      true,
      "public-before-private",
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-any": false,
    "no-inferrable-types": false,
    "no-internal-module": true,
    "no-var-requires": false,
    "typedef": false,
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      },
      {
        "call-signature": "space",
        "index-signature": "space",
        "parameter": "space",
        "property-declaration": "space",
        "variable-declaration": "space"
      }
    ],

    "ban": false,
    "curly": false,
    "forin": true,
    "label-position": true,
    "no-arg": true,
    "no-bitwise": true,
    "no-conditional-assignment": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-eval": true,
    "no-null-keyword": false,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-unreachable": true,
    "no-unused-expression": true,
    "no-unused-variable": false,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "radix": true,
    "switch-default": true,
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "eofline": true,
    "indent": [
      true,
      "spaces"
    ],
    "max-line-length": [
      true,
      100
    ],
    "no-require-imports": false,
    "no-trailing-whitespace": true,
    "object-literal-sort-keys": false,
    "trailing-comma": [
      true,
      {
        "multiline": false,
        "singleline": "never"
      }
    ],

    "align": false,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "interface-name": false,
    "jsdoc-format": true,
    "no-consecutive-blank-lines": false,
    "one-line": [
      false,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-finally",
      "check-whitespace"
    ],
    "quotemark": [
      true,
      "single",
      "avoid-escape"
    ],
    "semicolon": [true, "always"],
    "variable-name": [
      true,
      "check-format",
      "allow-leading-underscore",
      "ban-keywords"
    ],
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "import-destructuring-spacing": true
  }
}

</code></pre></div>
<p dir="auto">Can anyone guide me what I'm missing in this.</p>