Something I’ve heard from a few people in the Ionic community is that the miss the updates speed from Ionic App scripts when updating CSS. They often ask “how can I use app scripts with V5?” or “Why is Angular CLI so much slower?". Well it’s a bit more involved that just those blanketed statements, but it is possible wit the Angular CLI flag
App Scripts and Styles
Angular CLI and Webpack
Hot Module Replacement
Now Hot Module Replacement (HMR) is a method in which incoming changes to JS or CSS will be automatically injected into an app without requiring a full refresh. This sounds great in theory, though it can lead to some problems like stale app state between hard reloads. But HMR can let CSS updates be replaced on the fly like the old method we had in App Scripts.
Let’s look at an example. Here we’ll have a standard tabs based app that is served via
Here, when ever we make a change to CSS (or in this case, SCSS) file, we do a full refresh of the browser.
Now let’s make a change to to our serve command. We’ll use the
--hmr flag to tell the Angular CLI to enable Hot Module Replacement.
ionic serve -- --hmr
Notice the additional
--in there. This is just a way to tell the current process to pass the following flag to the child process.
With this in place, changes to style will be injected without a full reload.
Pretty awesome, huh?
The style updates with HMR in Angular does provide a lot of improvements to the feedback cycle. There are still some edge cases with regards to components being updated, but for those wanting faster style changes… There you go!