Regression from v3: scss changes causes app to reload

[ionitron-bot]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\Dylan van der Merwe\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (7 plugins total)

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Describe the Bug
In v3, you would run ionic serve and whenever changes were made to the scss files in the project, the styling would be applied to the app without reloading the page or restarting the app.

This was amazing from a design perspective because changes could be made to the scss files and the results could be seen immediately in the app.

In v4 this is not longer the case. Changing any scss file causes a rebuild event of the entire app, which causes the app to reload. This means you lose any state you had.

The development/design experience has worsened dramatically in this regard from v3 to v4. I do appreciate that this is due to the change in the build process (using the ng CLI) but this does not excuse the worsened development experience. I don't even think stencil does then when adjusting styles.

There must be a webpack or some form of config that can be set while in ionic serve mode? If not this should be raised with the Angular CLI team.

As it stands now, the development time for ionic v4 apps when styling pages has seriously deteriorated and something needs to be done.

[imhoffd]

@dylanvdmerwe I believe this is solved with enabling HMR for your app, see https://github.com/angular/angular-cli/wiki/stories-configure-hmr. I haven't tried this yet myself.

[dylanvdmerwe]

Very interesting @dwieeb. I definitely think this is something that we need to investigate further on setting up by default and what the impact is. I am already seeing comments on long build times and this could also assist with that. But definitely from a design point of view this would be amazing.

[acarbonellb]

Related question regarding HTML (not CSS) changes: https://stackoverflow.com/questions/51958194/avoid-full-page-reload-when-changing-html-in-ionic

I don't want to pollute this thread, but seems that WebPack's Hot Module Reload could be the thing. If it's possible to hot reload the HTML itself (I don't think so, tho) the developer experience would be awesome.

@dylanvdmerwe Long build times here too, with beta 12. I had to downgrade as it was too slow to work with. There is an actual conflict somewhere that won't be fixed with hot reloading. Do you have some Issue for that here? I'd like to check it and maybe help if I can. Thx.

[imhoffd]

@dylanvdmerwe @acarbonellb Is this the issue re: long build times? ionic-team/ionic-framework#15644

[dylanvdmerwe]

@dwieeb no, this is specifically about the CLI forcing a page reload when scss files change. V3 did not do this.

[imhoffd]

@dylanvdmerwe Right, but we're somewhat limited by what is possible with the Angular tooling. I am going to close this in favor of #3769