FontAwesome build problem

Topic: FontAwesome build problem

ngervasi pro asked 6 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 6 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

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear @boban

Could you please specify your environment information? Angular version, font-awesome version, browser, version of the mac os?

Also could you please check, if this problem exists on some other machine (mac, linux, windows)?

This problem was resolved with Angular 6, and shouldn't any longer exist.

Best Regards,

Damian

Add comment

boban free answered 6 years ago

0 0 Best answer

I have the exact the same problem using Mac as well.

Add comment

ngervasi pro answered 6 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.

Please insert min. 20 characters.

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 6 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

ngervasi pro answered 6 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):
<pre>"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"
],</pre>
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.

Please insert min. 20 characters.

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 6 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

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ngervasi

Pro User 15Support score
4Questions 3Answers 0Snippets