FontAwesome build problem

Topic: FontAwesome build problem

ngervasi pro asked 7 years ago

When building the project the CSS incorrectly includes the version in the fontawesome url giving a 404:

Failed to decode downloaded font: https://xxx.xxx.xxx/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
VM1627:1 Failed to decode downloaded font: https://xxx.xxx.xxx/fontawesome-webfont.fee66e712a8a08eef580.woff?v=4.7.0
VM1627:1 Failed to decode downloaded font: https://xxx.xxx.xxx/fontawesome-webfont.b06871f281fee6b241d6.ttf?v=4.7.0
come-funziona:1 Failed to decode downloaded font: https://xxx.xxx.xxx/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
come-funziona:1 Failed to decode downloaded font: https://xxx.xxx.xxx/fontawesome-webfont.fee66e712a8a08eef580.woff?v=4.7.0
come-funziona:1 Failed to decode downloaded font: https://xxx.xxx.xxx/fontawesome-webfont.b06871f281fee6b241d6.ttf?v=4.7.0

Here's the compiled CSS with the wrong URLs:

@charset "UTF-8";/*!
 *  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)

The only workaround is to manualli remove the "=v=4.7.0" from the compiled CSS before deploying.

Damian Gemza staff commented 7 years ago

Dear ngervasi, Could you one more time describe, what's wrong? Also please provide me your environment informations (OS, Browser, Angular version, MDB version, FA version), and reproduction steps. Best Regards, Damian

Add comment

ngervasi pro answered 7 years ago

0 0 Best answer

Sure. Environment: angular 6.0.0, CLI 6.0.0, MDB Pro 6.0.2, Mac OS 10.13.4, FA 4.7.0 (the one suggested by MDB). From my angular.json file (it was angular-cli.json):

"styles": [
  "node_modules/font-awesome/scss/font-awesome.scss",
  "node_modules/ng-mdb-pro/assets/scss/bootstrap/bootstrap.scss",
  "node_modules/ng-mdb-pro/assets/scss/mdb.scss",
  "src/styles.scss"
],

When compiling the following files are generated:

-rw-rw-r-- 1 ubuntu ubuntu 162K May 8 14:34 fontawesome-webfont.674f50d287a8c48dc19b.eot

-rw-rw-r-- 1 ubuntu ubuntu 434K May 8 14:34 fontawesome-webfont.912ec66d7572ff821749.svg

-rw-rw-r-- 1 ubuntu ubuntu 76K May 8 14:34 fontawesome-webfont.af7ae505a9eed503f8b8.woff2

-rw-rw-r-- 1 ubuntu ubuntu 162K May 8 14:34 fontawesome-webfont.b06871f281fee6b241d6.ttf

-rw-rw-r-- 1 ubuntu ubuntu 96K May 8 14:34 fontawesome-webfont.fee66e712a8a08eef580.woff

But the compiled CSS references them with the version number appended and the browser can't load them (see previous post) resulting in square placeholders instead of icons.

Damian Gemza staff commented 7 years ago

The problem exists only, when you're having nested routes? In example, not localhost:4200/component, but localhost:4200/nested/component ? And only in dev version (in prod working just fine)? If yes, it's not our fault. It's an Angular or CLI problem, and it should be fixed in stable 6.0.0 release. Best Regards, Damian

Add comment

ngervasi pro answered 7 years ago

0 0 Best answer

Not really, it’s quite the opposite: I don’t have nested routes: const routes: Routes = [ { path: ”, component: HomeComponent }, { path: ‘caratteristiche’, component: CaratteristicheComponent }, { path: ‘benvenuto’, component: WelcomeComponent }, { path: ‘faq’, component: FaqComponent }, { path: ‘condizioni’, component: CondizioniComponent }, { path: ‘come-funziona’, component: VideosComponent }, { path: ‘quanto-costa’, component: PrezziComponent }, { path: ‘team’, component: TeamComponent }, { path: ‘news’, component: NewsComponent }, { path: ‘contatti’, component: ContactsComponent }, { path: ‘**’, redirectTo: ” } ]; I’m using Angular 6.0.0 stable and angular-cli 6.0.0 stable and it only happens for prod and test builds: ng build toga.cloud –c=test “test”: { “optimization”: true, “outputHashing”: “all”, “sourceMap”: false, “extractCss”: true, “namedChunks”: false, “aot”: true, “extractLicenses”: true, “vendorChunk”: false, “buildOptimizer”: true, “fileReplacements”: [ { “replace”: “src/environments/environment.ts”, “with”: “src/environments/environment.test.ts” } ] } If you think it’s a CLI problem I will report on their github, weird that anyone else here is not having the same problem.

Damian Gemza staff commented 7 years ago

In Angular 6.0.0-rc.5 there was such problem with nested routes and dev version of the project. In production, FA's were working just fine. But please try to report your problem on Angular / CLI github, and let me know what they will tell you. Best Regards, Damian

Add comment

boban answered 6 years ago