How to add version number to CSS/JS files in angular 4?

Question

I would like to add versioning for my angular application to avoid cache like style.css?ver=1 ? Where should I add that in angular-cli.json?

Doesn't ng build --prod already append hash to your assets for that purpose? — msanford
– msanford, Commented Nov 8, 2017 at 18:36
I have this configuration here so I should be able to add like this? "styles": [ "assets/styles/app.scss?ver=123", "assets/styles/fonts.scss?ver=123" ] — Harsha Kakumanu
– Harsha Kakumanu, Commented Nov 8, 2017 at 18:43
That's not how you do it with angular cli. When you ng build --prod the tool will compile your assets with a hash of each asset and then append it to the filename for you, updating the imports. You don't have to do anything to manage this yourself. — msanford
– msanford, Commented Nov 8, 2017 at 18:45
For example, I also have a styles.scss file in my global styles. When I build in development mode, I get a styles.css file. With ng build --prod, webpack produces styles.7c4c51d1276ebd077169.bundle.css which is generated based on the file's contents, so you can cache it forever. — msanford
– msanford, Commented Nov 8, 2017 at 18:49
At the moment we are using ng build. I will change it to ng build --prod and see whether it will be able to hash the css/js links — Harsha Kakumanu
– Harsha Kakumanu, Commented Nov 8, 2017 at 21:36

msanford · Accepted Answer · 2017-11-08 22:31:42Z

11

Use ng build --prod, it will hash your assets and modules and append the hash to the file name.

You have nothing to manage manually.

answered Nov 8, 2017 at 22:31

msanford

12.4k13 gold badges73 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nitul Over a year ago

How can we add version number in URL for css and js? Can we automate it for all html files in build process? <script src="/js/app.<version-no>.js"></script>

msanford Over a year ago

@Nitul Like I said, using ng build --prod does all of that for you (provided that the assets are part of your angular application). See my comments on the original post. Using "version numbers" is an antiquated idea that was only useful when it was managed by human brains who needed to remember what was going on. A hash is better, and is completely automatic.

Collectives™ on Stack Overflow

How to add version number to CSS/JS files in angular 4?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related