mgechev / mgechev/angular2-hot-loader

Destroy and reinitialize only changed components

Open
#8 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
113
Forks
8
PR merge metrics
No merged PRs in 30d

Description

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`](https://angular.io/docs/ts/latest/api/core/AppViewManager-class.html). 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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file or test is named. Start by reading the DynamicComponentLoader implementation and Angular's AppViewManager API to understand the current root-component reload flow. Done means changed components and their children reload without reinitializing the whole application, with unaffected application state preserved where supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.