search

mgechev / angular2-hot-loader

[NOT MAINTAINED] Angular 2 hot loader
https://www.youtube.com/watch?v=S9pKbi3WrCM
114 stars 8 forks source link

Destroy and reinitialize only changed components #8

Open frederikschubert opened 8 years ago

frederikschubert commented 8 years ago

Right now the hot loading works by (re)loading the app's root component using the DynamicComponentLoader, i.e. reinitializing the whole application every time a component/template/style is updated. This could become a problem as the application grows larger. I know that by using patterns like flux or redux the view of the application can be reinitialized just by persisting the state before the application gets reinitialized. But for people who do not use such patterns the hot-loader could be more helpful if only those components (and thus their children) would be reloaded that changed. I haven't fully understood the inner workings of how Angular instantiates components and their respective views but I think one API one could use for this could be the AppViewManager. If this was possible then there would also be the possibility to transfer some of the state of the old component to the updated component. I think that this could provide an even smoother developer experience.

mgechev commented 8 years ago

Yes, this is in my roadmap. There are a couple of things to be considered here such as managing the reinstantiated view and content children.

I will rename the issue and add it as a feature request.

frederikschubert commented 8 years ago

I did some work on this and my current state can be seen here. I didn't find a way to destroy a component yet. I got it working now. Though there are a few things that are not quite right. 1. The hot-reloading now only works if the typescript file was changed. This should be easy to fix.

  1. It has to be defined how and if state should be transferred from the old component to the new one.
  2. I haven't tested the approach in a more complex example. There could be are problems with the createRootHostView function in case there are multiple instances of a component. Only the first component in the DOM will be updated.
mgechev commented 8 years ago

Since keeping the component's state is a core problem lets open a separate issue for discussion.

frederikschubert commented 8 years ago

I have mostly implemented the component-scoped reload here but I have a problem with the change detection. The CD only runs for the changed component but not for its parent, so the component's inputs are not refreshed. I don't know if that is the right way as the addition and removal of an attribute is kind of a hack to misuse the createRootHostView function.