ng-hot-reload-api
Hot reload API for Angular Components. This is what ng-component-loader use under the hood. It raises the power of Angular ^1.5.x
components by providing a new method called components()
and the ability to register components in the component itself. But its main feature is the Hot Module Replacement.
New ways to register components
// componentA.js // ...component options
// componentB.js // ...component options
// componentC.js bindings: title: '@' controller: ... template: ` <div> <h1>{{ ::$ctrl.title }}</h1> <component-a></component-a> <component-b></component-b> </div> ` // Register the components components: componentA componentB
// app.js api angular // OR components componentC /* other components */
Usage with Hot Module Replacement
// componentA.jsconst ComponentA = bindings: title: '<' template: `<h1>{{ $ctrl.title }}</h1>` // export the component // assuming Webpack's HMR API.// https://webpack.js.org/concepts/hot-module-replacement/#components/sidebar/sidebar.jsxifmodulehot const api = // compatibility can be checked via api.compatible if !apicompatible throw 'ng-hot-reload-api is not compatible with the version of Angular you are using.' // indicate this module can be hot-reloaded modulehotaccept if !modulehotdata // for each component option object to be hot-reloaded, // you need to create a record for it with a unique id. // do this once on startup. api else // if a component has only its template or render function changed, // you can force a re-render for all its active instances without // destroying/re-creating them. This keeps all current app state intact. api
Note: You can provide the above code through a webpack loader.
// App.js api angularcomponents componentA
License
The MIT License