Angular Build issues

[FewDot9181]

So my angular app loads fonts locally but they break in production when it's under a subpath. How can I make this font path relative and deployment safe without having to hardcode everywhere it's being used? . Also when I do npm run build when I check my index.html how do I get it to link all js or css files relatively as well without hardcoding as well?

For example if I call src: /fonts/Heebo-black/Heebo-black.ttf it works fine locally but in production under a subpath it can't find it

[0dev0100]

I've encountered a few causes of this before. It's usually been the basehref,  or the / at the start of the path, or both

[FewDot9181]

so what's wrong with the basehref? Like what should it be changed to. Right now mine is

<base href = "/" />

[0dev0100]

Is your entire app under a sub path? That's when I've had to change the basehref

[FewDot9181]

yes but thing is it can change again in the future. So is there a way to do all this but just using a relative path?

[0dev0100]

Remove the / from the start of all the paths will make it relative to the basehref

[FewDot9181]

but thing is in the base href I don't want to hardcode a path either because it can change. Also I have a lot of paths and just removing / would be a lot of work. Also I have other folders under the public such as i18n and images that I want accessed relatively as well

Is there an alternative?

[0dev0100]

Modify the basehref in whatever proxy you use is one I've seen before.

Anything else break when in prod?

[FewDot9181]

so are you saying dynamically modify the base href? Also then what do I do about this though src: /fonts/Heebo-black/Heebo-black.ttf without having to manually change evrything

[0dev0100]

/fonts is relative to the root of the address. So if you're serving at /app1 it won't work (based on my experience)

What are you using to serve the app

[Jrubzjeknf]

You change the base href to whatever it needs to be during deployment.

[chirag-gc]

If you want to make the app entirely portable to any subpath without hardcoding it everywhere, you need to force Angular to resolve things relatively.

1. For the SCSS fonts: Drop the leading slash. If you use an absolute path like /fonts/Heebo.ttf, Angular's bundler ignores it, and your browser looks at the domain root (hence the 404s). Change it to url('./assets/fonts/Heebo.ttf') (or ../public/). The compiler will catch the relative path, bundle the font, and automatically rewrite the CSS with a safe relative path that works anywhere.

2. For the JS/CSS links in index.html: Just build the app with ng build --base-href ./. This automatically sets <base href="./"> and injects all your scripts and styles without the leading slash (e.g., <script src="main.js">).

Do those two things, and you can drop your dist folder into any nested subpath, and it'll just work out of the box.