babel-plugin-ng-hot-reload

🔥 babel-plugin-ng-hot-reload

A babel plugin which enables hot module replacement in angular.js applications.
The plugin is based on the ng-hot-reload webpack loader but is rewritten as babel plugin so that it is compatible with es-module syntax and every bundler which supports the hot-replacement API (e.g. webpack or parcel).

Getting started

To see it in action you can simply checkout the examples on CodeSandbox:

• Webpack / JavaScript demo on CodeSandbox
• Webpack / TypeScript demo on CodeSandbox

npm i -D babel-plugin-ng-hot-reload     # npm or
yarn add -D babel-plugin-ng-hot-reload  # yarn

Add the following to your babelrc.js file:

// without options
module.exports = {
  plugins: ['babel-plugin-ng-hot-reload'],
};

// with options
module.exports = {
  plugins: [
    [
      'babel-plugin-ng-hot-reload',
      {
        angularGlobal: false,
        forceRefresh: false,
        preserveState: false,
      },
    ],
  ],
};

Options

FAQ

Use it together with @babel/preset-env

This plugin should be work nicly together with the @babel/preset-env plugin. In opposite to the original webpack-loader it's not required to transpile your code to commonjs modules:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false, // Don't transpile the modules
      },
    ],
  ],
  plugins: ['babel-plugin-ng-hot-reload'],
};

For an example check out the Webpack / Javascript example.

Use together with ngAnnotate

When you are using this plugin together with babel-plugin-angularjs-annotate make sure that the ngAnnotate plugin is added before this plugin in your .babelrc.js:

module.exports = {
  plugins: ['angularjs-annotate', 'babel-plugin-ng-hot-reload'],
};

For an example check out the Webpack / TypeScript example.

Author

Felix Haus Website • Twitter

License

MIT - see LICENSE for details.