Angular Hot Loader

🔥 Webpack Hot Module Replacement for Angular 1.x applications.

Now works only with UI Router

Forked from Angular-HMR

Installation

• npm

npm install --save-dev angular-hot-loader

• yarn

yarn add --dev angular-hot-loader

Webpack setup

• Webpack 2.x:

rules: [
  {
    test: /\.js$/,
    use: [
      'angular-hot-loader',
      // Any other loaders.
    ]
  }
]

With options:

rules: [
  {
    test: /\.js$/,
    use: [
      {
        loader: 'angular-hot-loader',
        options: {
          log: true,
          rootElement: 'html'
        }
      },
      // Any other loaders.
    ]
  }
]

• Webpack 1.x:

loaders: [
  {
    test: /\.js$/,
    loader: 'angular-hot!...other loaders'
  }
]

Webpack Hot Module Replacement setup:

See Webpack documentation:

• Webpack 2.x
• Webpack 1.x

Options

rootElement {String}

Default: [ng-app]

Specifies application DOM root element selector. Use 'html' when boostraping your Angular app on document.

log {Boolean}

Default: false

Enables module output to console.

How it works

This will inject the new controller / template / service / whatever and then reload the state in UI Router.

Example app structure:

import MyFactory from './your-factory';
import MyCtrl from './your-controller';
import MyComponent from './your-component';

angular
  .module('my-app', [ui.router])
  .directive('MyDirective', require('MyDirective'))
  .factory('MyFactory', MyFactory)
  .controller('MyCtrl', MyCtrl)
  .component('myComponent', MyComponent);