Add HMR when using component styles and template

[mikkelrd]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Although the Angular+Webpack docs present the combo as "an excellent alternative to the SystemJS approach", loading component styles via styles or styleUrls results in a full page refresh, instead of style injection, which occurs when using SystemJS+lite-server.

Expected behavior

A core feature of using Webpack+Webpack-dev-server in development is the availability of Hot Module Replacement. It is expected that HMR would work for css injection regardless of the style loading strategy used. Instead, currently changes to css or scss files which are included in a component's styles result in a full page reload.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Speed up the Angular 2 development process for CSS developers

Please tell us about your environment:

• Angular version: 2.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript 2.02 | ES6/7 | ES5]

• Webpack version: 1.13.2

• Webpack-dev-server version: 1.14.1

• Node (for AoT issues): node --version = 6.5.0

[vicb]

@hansl do this issue belongs to the CLI ?

[hansl]

This is technically within the Angular Core team, but it's unclear whether this is doable without breaking changes. It might be possible without any changes to Angular as well, if you can unload Components and reload them.

He's asking for HMR support, which would allow API endpoints to replace style/templates of certain components (or delete the component from memory, and reload it from a new source), instead of rebuilding the whole Angular bootstrap.

[kubal5003]

A lot of time has passed since this question was asked. Are there any updates? I've seen people doing HMR with Angular, but never with component level isolation.

[shyamal890]

Would appreciate an update on this issue.

[naivefun]

After tried React hot CSS reload the Angular CSS reload with page reload is unbearable. Really expect this feature!

[vulkanosaure]

any news about that ? i also can have HMR for global scss files, but not for component specific scss files, really look forward to it as well

[pablozandona]

+1

[michaeljota]

This can be doable with proper HMR configuration. I think this can be closed, as this is not related to Angular.

import { ApplicationRef, NgModuleRef } from '@angular/core';
import { createNewHosts, removeNgStyles } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>): void => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then((mod) => (ngModule = mod));
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map((c) => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    removeNgStyles();
    ngModule.destroy();
    makeVisible();
  });
};

[hiepxanh]

how it's going? it been 4 years since this issue open. I belive that it's really important. It's helpful. And it's community voice

[michaeljota]

@hiepxanh You can use @angularclass/hmr library for this.

[hiepxanh]

@michaeljota I already try this.
I even develop this
I have a plugin that allow us to do that. It's emit change base on vscode extention to chrome extention. Fast reload without reload all application https://www.youtube.com/watch?v=W-hWhR5GX_c&t=1s (repos here: https://github.com/xanhtool/SnapCss)
But this is not enough.
angular/angular-cli#6381 (comment)