babel-plugin-ng-hot-reload

🔥 babel-plugin-ng-hot-reload

A babel plugin which enables hot module replacement in AngularJS 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
• Parcel / TypeScript demo on CodeSandbox (There are some issues, see: FAQ)

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: true,
        preserveState: true,
      },
    ],
  ],
};

Options

Option	Default	Description
angularGlobal	false (false or string)	Define whether angular is provided as global variable. Set to 'angular' when angular is your global variable.
forceRefresh	true (boolean)	Whether to reload window automatically when a change in source files can't be hot-reloaded. Note that Webpack DevServer also has its own option hotOnly, which should also be configured correctly to get the behaviour you want when hot reloading fails. (ng-hot-reload option)
preserveState	true (boolean)	If true, the library attempts to preserve some state in scope and controller instances when they are reloaded. Preserving state is an experimental feature and quite "hackish" so it may cause problems in some cases. Setting this to false might help if you run into weird errors. (ng-hot-reload option)

FAQ

Use together with @babel/preset-env

This plugin should work nicely together with the @babel/preset-env plugin. In opposite to the original ng-hot-reload 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 (default)
      },
    ],
  ],
  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.

Known issues with parcel

Since this plugin only requires babel, you can use every build tool which supports hot-module-replacement.
You can check out the Parcel / TypeScript example to see how it works with other bundlers than webpack.

Unfortunatly there are currently some issues related to parcel:

• No hot-module-replacement for HTML templates (parcel#943)
• Importing CSS from TypeScript file does not work (See fade.component.ts)

Author

Felix Haus Website • Twitter

License

MIT - see LICENSE for details.