3

I recently upgraded my web application from ng4 to ng6. The new angular-cli seems to build the bundles differently than ng4.

I have verified that the font files are being included in the dist directory and that the hash is being created properly.

fontawesome-webfont.674f50d287a8c48dc19b.eot
fontawesome-webfont.af7ae505a9eed503f8b8.woff2
fontawesome-webfont.fee66e712a8a08eef580.woff
fontawesome-webfont.912ec66d7572ff821749.svg
fontawesome-webfont.b06871f281fee6b241d6.ttf

Looking inside the corresponding styles bundle, styles.863b3e5b89b185b8f9c6.css I can see that the path includes a version number.

*  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:FontAwesome;src:url(fontawesome- 
webfont.674f50d287a8c48dc19b.eot?v=4.7.0);src:url(fontawesome- 
webfont.674f50d287a8c48dc19b.eot?#iefix&v=4.7.0) format("embedded- 
opentype"),url(fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0) 
format("woff2"),url(fontawesome-webfont.fee66e712a8a08eef580.woff? 
v=4.7.0) format("woff"),url(fontawesome- 
webfont.b06871f281fee6b241d6.ttf?v=4.7.0) 
format("truetype"),url(fontawesome-webfont.912ec66d7572ff821749.svg? 
v=4.7.0#fontawesomeregular)

Is there some way to remove the version number from the bundle? I'm getting a 404 error because of this issue. If I make a request to the path without the query parameter, it works just fine.

I looked at ng-cli 6 and font awesome icons not working which looks to be a similar problem, but the author ended up modifying some of the font-awesome css to fix it (not ideal).

Additional information which may or may not be relevant:

  • "@angular/common": "6.0.7"
  • "font-awesome": "4.7.0"
  • "@angular/cli": "^6.0.8"

I'm using Adobe AEM for the CMS and my Angular application is running on Apache 2.4. The dispatcher on Apache is taking any requests with query parameters and forwarding them to the CMS which fails (404 not found) since the fonts are part of the Angular application and stored on the web server. I could add a rule to the dispatcher configuration, but I was hoping that the application would build the same as it did with ng4.

austin-a
  • 31
  • 3
  • I can't remember for sure, but I think the version query is removed when you build for production. Try `ng build --prod` – Reactgular Sep 12 '18 at 01:19
  • I use `@fortawesome/angular-fontawesome` and import the fonts via WebPack. This bundles the SVGs into the JS bundles (I'm using FontAwesome 5 as well). I know this isn't a solution for your problem, but I've found this to be a lot better. – Reactgular Sep 12 '18 at 01:25
  • Have you found a solution? I am facing the same issue. – Max Oct 01 '18 at 20:18
  • I don't have the right solution yet. My current work around is a config in dispatcher.any which prevents the url with query parameters for font awesome from being forwarded to AEM. – austin-a Oct 03 '18 at 04:04

1 Answers1

0

My best solution is to add a new rule in dispatcher.any to ignore the URL parameters for the requests to the font awesome assets.

/ignoreUrlParams
{
  { /glob "v" /type "allow" }
}
austin-a
  • 31
  • 3