Update of styles should not reload the full page

[MickL]

Currently the server performs a full page reload. It should reload only the styles instead.

Possible solutions (clientside js):

• CSSrefresh
• CSS auto-reload

[clydin]

This would only affect global styles. Component styles are inlined.
And the page would still reload. The Dev server controls the reload. However, it recently started supporting HMR. You need to manually configurable your app to support it though.

[MickL]

Page reload for component styles is necessary and ok. But for regular styles css/scss/less it shouldn't reload the whole page.

Btw i assert that most css-frontend-developers won't use component styles.

Update 2019: i was wrong, component styles are the greatest thing ever!

[montella1507]

Well.. i think the must of reloading the page is not the biggest problem. The biggest problem is, that webpack is rebuilding typescripts, optimizing assets and tons of another work, even if you had changed only 1 row in GLOBAL sass file.

So the typical terrible experience with that is:

1. SASS rebuild time: 100ms
2. Webpack detects changes style.css
3. Webpack rebuild: 25000ms

I have tried lazy styles too, but the behavior is exactly the same .. Webpack is rebuiling..

Is it really needed to rebuild ALL, even if you have changed something in Global style = non shadow domed etc.

[gildebrand]

Any news on this issue?

I have the same problem. I don't utilize component inline styling, but I do have a SCSS-file in the same directory as each component that is imported into my global stylesheet. For every small change in any SCSS-file, the entire app is recompiled, and reloaded. This takes approximately 20-25 seconds on my Mac, which is horrible when used to changes updating immediately.

EDIT:
I note that all styling is loaded through JS in the styles.bundle.js-file, instead of added as CSS in the head of the HTML-document. I guess this is a part of the problem!

[montella1507]

--extract-css in next Angular-cli 25. But it has several new bugs regarding webpack rc.3.. it has been already fixed in rc.4 so we have to wait for angular-cli 26

[clydin]

Actually the JS bundle is significantly faster than the extracted CSS in terms of rebuild time.
There is no one fix for the speed issue; each new beta is showing incremental improvements however.

Webpack 2.2.0 final should be in beta.26

[montella1507]

@clydin well.. i would use styles: [] WITHOUT --extracted-css. but i really need SASS source maps.. and it has not been working for months... .map files are generated, but they are empty..

So i hoped, that --extracted-css will help NOT-ONLY with rebuild times, but with sourcemaps...

So the only solution that is OK for me is:

1. use gulp-sass to build SCSS files
2. copy generated .css to content folder
3. Wait for webpack "rebuild for nothing"
4. Wait for page refresh

It takes 150ms to rebuild SCSS + 16sec to rebuild solution with webpack without any change in code....

Its annoying, but it is the fastest solution with working source maps.

I still believe in dream, when i do one little change in SCSS and have to wait only 150ms for SASS rebuild 🗡

[niklas-dahl]

the ionic 2 cli makes it that changing a components stylesheet does not trigger a full reload, no idea how they do it and if it is possible to re-create this behaiviour here, but it uses angular 2 aswell so maby this is a starting point.

[filipesilva]

Fixed in #3943

[shyamal890]

@filipesilva Sorry, I still don't fully understand the solution.

1. From what I gather with the merged request in feat(build): add --extract-css flag #3943 scss changes to file styles.scss and it's references shouldn't trigger page reload. While at the same time if a change is made to scss file linked to a component page reload would trigger. (ng serve without flags)

2. I tried 1 and it triggers reload for both global scss files and component linked scss files.

3. In Ionic page reload is not triggered on scss change but yet updating the css. That is both for linked and global scss files. Why can't the same be incorporated in Angular CLI?

Angular CLI Version: 1.6.7

[ndunks]

Many developer using modern browser such-as chrome based that can update-css without reload page (with devtool). I think is good if Angular has option about 'only compile/build scss /css to styles bundle' without reload page. or maybe an option to ignore watching some file(s).

[haskelcurry]

Why is it closed? It's still not resolved and it makes a development experience with Angular much worse than it could be.

[MickL]

I dont know if it is possible to not reload the page since a lot of styles are part of components(js files) which may loaded dynamically. Maybe with the --extract-css option? Or with new Ivy renderer?

Compile times have become very fast even for complex applications(often around one second) and when you are theming you often change the html-files, too which have to trigger a full reload. So maybe there will not be huge benefits.

Anyway I would love to see css injection on development within less a second, too. This issue is definitely not resolved, @filipesilva maybe reopen? Or make a statement if this will never be possible?

[filipesilva]

@MickL my memory is sketchy about the resolution for this issue, but I think using HMR should be enough for global CSS to be updated without a page reload. I think that should also work for component CSS. Is that not the case?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}