Why ionic search build/assets for fonts

I run npm run ionic:build -prod to build my PWA project. After every build, I change the path “build/” to “build/versionxx” on the index.html for handling cache busting. However, after I change the path, ionic starts looking for fonts under path “build/assets” instead of “assets/”. Why?
If I want to version my assets folder as well, where should I change the “assets/” to “assets/versionxx”?
Can anyone help me pls?
@reedrichards hi reedrichards, do you have any idea?
@rapropos hi robert, can you please help me?

not sure actually, my first question would be why are you busting the cache every time ?

Because every release I make consists of lots of changes. If I didn’t do it, my customers has problems with their browser cache. They might get a blank page. I use aws cloudfront, s3, it’s quite difficult to figure out what the best practice is.

I see, to be honest, I don’t know, I’m with you, no idea what’s the production strategy to apply. I opened that question without answer a while back [PWA] Service worker app cache duration

About s3, I think I did a change to always fetch the http request without cache. To do so I have modified the following in service-worker.js

 // https://github.com/GoogleChromeLabs/sw-toolbox/blob/master/docs/api.md
 self.toolbox.router.default = self.toolbox.networkOnly;

There are probably some strategies but I don’t know more…looking forward to hear about the outcome of your post

Because every release I make consists of lots of changes. If I didn’t do it, my customers has problems with their browser cache. They might get a blank page. I use aws cloudfront, s3, it’s quite difficult to figure out what the best practice is.

I couldn’t agree more. To find the best practice for production isn’t easy and there is not much could be found online. People who know the stuff are either too busy or …

anyway, thx for jump in every time. I am nearly done with my web app. it’s time to tight the loose ends. Currently, I even disable the service worker because this whole cache thing is driving my crazy. I I will keep you updated about my findings.

What about using a Service Worker?

Angular’s support for Service Workers is provided by the @angular/service-worker module. You can add Angular’s Service Worker (NGSW) module to your Ionic project using npm:

npm install @angular/service-worker --save


@robinyo7h you mean using angular/service-worker instead of sw-toolbox?

if I may ask, what would be the advantages? and doing so, the same cache issue wouldn’t be faced too?

Just finished reading the docs. I’d say the angular sw implementation adds some CLI, API and documentation sugar to the core service worker implementation. I reckon Angular is going to expand on this API to smoothen the developer experience.

I still find service-workers tough cookies to digest reading all sorts of blogs and various caching strategies (also not having that much time to try stuff)

1 Like


Well said.

Post must be at at least 20 characters.

1 Like

Hi robinyo, thanks for the help. I will take a look at it. btw, do you have any idea about the assets path change?

Don’t know exactly but maybe there is a way to set your subfolder versionxxx at build time not afterwards in order to prefix both assets and build folders? like a config of ionic cli or app-script?

@lolaswift have a look to [PWA] Service worker app cache duration maybe could be another solution to invalidate the cache without having to change manually versionxxx has you actually does and therefore would solve your fonts issue too

@reedrichards. Definite will do!
thanks again!

1 Like

the Service worker from angular 6.x is pretty good however, I am still using ionic3 with angular 5. maybe it’s a good idea to wait for ionic 4? I guess it should work with angular 6?

Currently, I work around my problem by versioning my build folder and assets folder. And it works well.

don’t have the reference right here but if I remember correctly I saw a tweet from Justin stating that Ionic v4 respectively ionic-angular v4 will comes with Angular v6

that would be great. To be honest, I still feel more comfortable staying with ionic-angular instead of going stencil. Angular is getting better and better.

You are not alone and probably a lot of existing productive app will not be modified from angular to stencil in a first place

Knowing angullar is going to support webcomponents too why bother stencil? Anyway, off topic

I agree! I believe the stencil path will gain it’s popularity as well. At the end of the day, just use the right tool to do the right thing. I am excited to learn stencil as well. To be honest, I love ionic but I am a bit disappointed at the Ionic team about how they are running their business. The organization is not mature yet and they are still struggling with finding their own business model. I am having a lots of pain now supporting my ionic 1.x which is being ignored by the team and there isn’t much attention being put on supporting the community ionic 3.x either. If they have some sort of business plan and if those plans are consistent, I’d be happy to pay to get some support. That’s actually another reason why I want to stay with ionic-angular, the angular community is bigger and lots of issues are discovered and solved a lot faster. Now I am even further away off the topic. :smile:. it doesn’t matter though. I got my help from you guys. Especially @reedrichards. And I solve my problem by manually renaming my folder names after the build. It sounds a bit clumsy but it’s working for me. I hope this workaround will help the others as well.

@Tommertom @lolaswift what I meant is that modifying an existing productive app has a cost respectively would cost money

I’m just guessing that most companies in a first place straight at the begin of Ionic v4 might not invest in a migration from angular to stencil for costs reason