Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

angular2-hot-loader

[NOT MAINTAINED] Angular 2 hot loader

Subscribe to updates I use angular2-hot-loader


Statistics on angular2-hot-loader

Number of watchers on Github 122
Number of open issues 11
Average time to close an issue 2 days
Main language TypeScript
Average time to merge a PR about 4 hours
Open pull requests 0+
Closed pull requests 0+
Last commit over 3 years ago
Repo Created almost 5 years ago
Repo Last Updated over 2 years ago
Size 29 KB
Homepage https://www.youtu...
Organization / Authormgechev
Contributors3
Page Updated
Do you use angular2-hot-loader? Leave a review!
View open issues (11)
View angular2-hot-loader activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating angular2-hot-loader for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Note that the project is in very early stage of development. It is still not ready for usage but you can give it a try and share your feedback.

Angular2 Hot Loader

Hot loader for Angular 2, inspired by react-hot-loader.

How to use?

npm install angular2-hot-loader

You can start the hot loader server by:

import * as ng2HotLoader from 'angular2-hot-loader';

ng2HotLoader.listen({
  port: 4412,
  projectRoot: __dirname
});

Somewhere inside of your templates add:

System.import('//localhost:4412/ng2-hot-loader')
  .then(module => {
    module.ng2HotLoaderBootstrap(AppCmp, [PROVIDERS]);
  });

Now you can watch your file system with any module you feel comfortable with. Once you detect a change in the target files use:

ng2HotLoader.onChange([fileName]);

Now on each edit the changes should be pushed to the client.

Roadmap

  • [x] Update the component's inline templates
  • [x] Update the component's external templates
  • [x] Update the component's altered methods
  • [x] Update the component's removed methods
  • [x] Allow definition of new components
  • [x] Update the component's metadata
  • [ ] Update the component's constructor on change
    • [ ] For components declared in the directives array
    • [ ] For components declared in the @RouteConfig definition
  • [ ] Preserve the state of the components (i.e. the values of the bindings)
  • [ ] Preserve the instantiated tokens in the element injectors

Features

  • Add new methods to existing components
  • Clean removed methods from existing components
  • Support changes of external and inline templates
  • Allows adding inputs and outputs (events and properties) to the components

Limitations

  • Does not push changes in services & pipes
  • Does not update component's constructor

License

MIT

angular2-hot-loader open issues Ask a question     (View All Issues)
  • over 4 years fix(package): updating to beta.12
  • over 4 years Newbie question
  • over 4 years server part question?
  • over 4 years Refactoring
  • over 4 years Preserving component's state
  • over 4 years Hot reload a component's constructor
  • over 4 years Destroy and reinitialize only changed components
  • over 4 years Feature: Add possibility to change ViewEncapsulation mode
  • over 4 years Document not (yet) implemented features
angular2-hot-loader list of languages used
Other projects in TypeScript