Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mgechev/angular2-hot-loader
[NOT MAINTAINED] Angular 2 hot loader
https://github.com/mgechev/angular2-hot-loader
Last synced: about 1 month ago
JSON representation
[NOT MAINTAINED] Angular 2 hot loader
- Host: GitHub
- URL: https://github.com/mgechev/angular2-hot-loader
- Owner: mgechev
- Created: 2015-10-25T21:40:59.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-19T01:40:07.000Z (almost 8 years ago)
- Last Synced: 2024-10-23T07:51:55.803Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=S9pKbi3WrCM
- Size: 28.3 KB
- Stars: 114
- Watchers: 17
- Forks: 8
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular-components - angular2-hot-loader - Angular 2 hot loader. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-hot-loader - Angular 2 hot loader. (Uncategorized / Uncategorized)
README
**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](https://github.com/gaearon/react-hot-loader).
[](https://www.youtube.com/watch?v=S9pKbi3WrCM)
## How to use?
```
npm install angular2-hot-loader
```
You can start the hot loader server by:
```ts
import * as ng2HotLoader from 'angular2-hot-loader';
ng2HotLoader.listen({
port: 4412,
projectRoot: __dirname
});
```
Somewhere inside of your templates add:
```ts
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:
```ts
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