1.7.0 fonts are corrupted after prod build

[MateEke]

Versions

Angular CLI: 1.7.0
Node: 8.9.1
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.7.1
webpack: 3.11.0

Repro steps

• Install @angular/cli: 1.7.0
• import fontawesome in .angular-cli.json or in styles.scss
• run ng build --prod

Observed behavior

Failed to decode downloaded font: http://***/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
OTS parsing error: invalid version tag

Desired behavior

FontAwesome icons works fine

Mention any other details that might be useful (optional)

With cli 1.6.8 everything is OK

[rajweb]

same issue on build and on ng serve got error
TypeError: undefined is not a function at Array.map () at webpackAsyncContext

[filipesilva]

I tried reproducing on Windows with 1.7.0 and could not. This is what I did:

ng new latest-project
cd latest-project
npm run build # builds with prod successfully
npm install --save font-awesome
# add "../node_modules/font-awesome/css/font-awesome.css" to `.angular-cli.json` 
# as described in https://github.com/angular/angular-cli/wiki/stories-include-font-awesome
npm run build # builds successfully 
npm start -- --prod # serve with prod, no error on browser

[MateEke]

ng serve is fine for me, the error occurs when I run ng build --prod and use nginx or apache to serve the content.

[clydin]

Tried a production build ng build --prod with live-server and could also not reproduce the issue.

[MattMorrisDev]

I didn't try this guy's build, but I see these same errors using ng serve using the same setup described here.

The issues started in 1.7.0-beta3 for me. Please let me know if you guys need any more info - this one is blocking me from upgrading (along with #9651) so I'd be glad to provide whatever info would help.

[clydin]

@MattMorrisDev That was caused by a bug in the betas that was fixed for the final release via #9564 . The issue occurring here appears to be due to an interaction with nginx/apache.

[MattMorrisDev]

Sorry, you're right. Got my versions/bugs mixed up.

[clydin]

This may be due to a caching issue. An old corrupt version of the file could either be cached local in the browser or in some intermediate cache.

[MateEke]

Not related to caching, I always build a new docker container on deploy, and when I make it with 1.6.8 everything is fine, with 1.7.0 always messed up. On my work PC caching in disabled in the browser.

[russ-blaisdell]

Seeing the same, moving back to 1.6.8. I also build a new container each time on ubuntu. So not related to caching or windows or mac.
Builiding with ng build --prod --aot false perhaps that makes a difference.

[clydin]

As we are unable to reproduce this, can you possibly put together a minimal reproduction that demonstrates the problem.

Also, does this occur with ng serve in production mode? Something else to try would be to do a production build and then use live-server (or similar) to test locally and reduce the complexity of the test case.

[andjiev]

@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); in my theme css
seems to not load my fonts. I imported them manually in my index.html and the problem is gone.
This happens when using ng build --prod.
ng serve works fine.

[clydin]

@andjiev That's not related to this issue as the fonts in that case would not be processed by the CLI as it is an absolute URL. This issue may be more relevant: #9267. Also see my comment from that issue on why loading fonts in that manner is generally not a good idea: #9267 (comment)