Package Exports

angularjs-hot-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angularjs-hot-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

AngularJS Hot replacement for webpack

A Webpack loader for Hot Module Replacement in AngularJS applications.

This will only work in Ui Router at the moment with a specific app structure shown below. Will work on it a bit more over the week.

Throwing up a sample app up at https://github.com/dimpu/angularjs-hot-loader

How to use

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',

        './src/index.js'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'index.bundle.js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: [
                    // 'angularjs-hot-loader',
                    '../index',
                    'babel-loader'
                ],
                exclude: /node_modules/
            }

        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],

    devServer: {
        host: 'localhost',
        port: 3000,

        historyApiFallback: true,
        // respond to 404s with index.html

        hot: true,
        // enable HMR on the server
    },
}

angular
  .module('app.components')
  .directive('sessionItem',function() {
    return {
        restrict : 'E',
        scope: {
            session: '='
        },
        bindToController: true,
        controllerAs: 'state',
        replace: true,
        controller: 'sessionItemCtrl',
        template: require('./template.html')
    };
  })
  .factory('TestFactory', function() {
    console.log('derp');
  })
  .controller('sessionItemCtrl', require('./sessionItemCtrl'));

and you save that the browser should refresh