1.7.0 fonts are corrupted after prod build #9648

MateEke · 2018-02-16T10:26:22Z

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 · 2018-02-16T11:00:18Z

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

filipesilva · 2018-02-16T13:53:17Z

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 · 2018-02-16T14:03:29Z

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 · 2018-02-16T21:03:05Z

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

MattMorrisDev · 2018-02-16T21:51:46Z

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 · 2018-02-16T23:41:24Z

@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 · 2018-02-16T23:46:58Z

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

clydin · 2018-02-18T00:12:13Z

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 · 2018-02-18T15:57:59Z

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 · 2018-02-20T12:49:23Z

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 · 2018-02-20T14:00:18Z

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 · 2018-02-20T15:46:09Z

@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 · 2018-02-20T17:46:49Z

@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)

russ-blaisdell · 2018-02-20T23:41:59Z

Items that "might" help on repro. I am sorry I cannot easily break down the app, which is both large and proprietary.
A) This is occurring, in my example. using p-treetable (https://www.primefaces.org/primeng/#/treetable)
package.json:

{
  "name": "xxxxxi",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.3",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.3",
    "@angular/compiler": "^5.0.3",
    "@angular/compiler-cli": "^5.0.3",
    "@angular/core": "^5.0.3",
    "@angular/forms": "^5.0.3",
    "@angular/http": "^5.0.3",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.3",
    "@angular/platform-browser-dynamic": "^5.0.3",
    "@angular/platform-server": "^5.0.3",
    "@angular/router": "^5.0.3",
    "@swimlane/ngx-datatable": "=11.1.3",
    "@types/file-saver": "0.0.1",
    "angular-font-awesome": "^3.0.3",
    "bootstrap": "^3.3.7",
    "bootstrap-slider": "^9.8.1",
    "chart.js": "^2.6.0",
    "codelyzer": "^4.0.1",
    "core-js": "^2.4.1",
    "d3-ng2-service": "^1.19.0",
    "dom-walk": "^0.1.1",
    "eslint": "^4.4.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "global": "^4.3.2",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "jstz": "^1.0.10",
    "material-design-lite": "^1.3.0",
    "min-document": "^2.19.0",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "ng2-charts": "^1.6.0",
    "ng2-select-compat": "1.3.1",
    "ng2-slideable-directive": "^1.0.13",
    "ng2-slider-component": "^1.0.9",
    "ngx-bootstrap": "^2.0.2",
    "primeng": "^4.3.0",
    "rxjs": "^5.5.2",
    "tether": "^1.4.0",
    "topojson": "^3.0.2",
    "typescript": "^2.4.2",
    "typings": "^2.1.1",
    "xlsx": "^0.11.2",
    "zone.js": "^0.8.14",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0"
  },
  "devDependencies": {
    "@angular/cli": "=1.6.8",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/topojson": "^3.0.2",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3",
    "world-atlas": "^1.1.4"
  }
}

Build is ng build --prod --aot false
angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "dash-ui"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css",
        "../node_modules/@swimlane/ngx-datatable/release/index.css",
        "../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
        "../node_modules/@swimlane/ngx-datatable/release/assets/icons.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/moment-timezone/moment-timezone.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

russ-blaisdell · 2018-02-20T23:46:52Z

Note on above when failing the angular cli version in package.json was "@angular/cli": "^1.6.4",. Build today, 2-20-2018 which being a fresh npm install/ng build had pulled the latest 1.7.0

255kb · 2018-02-22T12:14:25Z

Same problem for me but with version 1.7.1, everything is fine with version 1.7.0.

Versions

Angular CLI: 1.7.1
Node: 8.9.4
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

TimoFrye · 2018-02-23T01:26:02Z

Same problem with 1.7.1 and latest semantic-ui

Failed to decode downloaded font: http://localhost:4200/icons.674f50d287a8c48dc19b.eot?#iefix)%20format(%27embedded-opentype%27),url(themes/default/assets/fonts/icons.woff2)%20format(%27woff2%27),url(themes/default/assets/fonts/icons.woff)%20format(%27woff%27),url(themes/default/assets/fonts/icons.ttf)%20format(%27truetype%27),url(themes/default/assets/fonts/icons.svg#icons)%20format(%27svg%27
OTS parsing error: invalid version tag

1.7.0 works just fine when running ng serve --aot

fergalmoran · 2018-03-04T21:10:57Z

Can confirm on 1.7.* when "ng build --prod" is served through nginx. As above, clean docker image each time so definitely no caching issue. Reverting to 1.6.8 resolves.

arrow-dev · 2018-03-05T05:29:30Z

Hmm I'm having a strange issue with fonts too since upgrading to 1.7.2 from 1.6.8, when I run --prod build my font imports seem to just disappear, I have moved them to index.html to get them working again, the strange thing is that it's only happening in one branch and I can't see any differences of note between the branches that would cause this, I haven't looked into it too much yet but it occurs running ng serve --prod as well as ng build --prod then using http-server to serve.

anton-gorbikov · 2018-03-15T08:55:57Z

I'm experiencing similar issue after migrating from 1.6.8 to 1.7.3. Steps to reproduce:

ng new latest-project
cd latest-project

Download any font as a sample and put it into the project directory. I'll use Font Awesome as example. Then manually add @font-face definition to styles.css:

@font-face {
	font-family: "Font Awesome";
	src: url("./fa-solid-900.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

body {
	font: "Font Awesome";
}

Then try to build the project:

ng build --prod
Date: 2018-03-15T08:46:41.758Z
Hash: ed0a71e03117b9c23e5c
Time: 4473ms
chunk {0} polyfills.bf95165a1d5098766b92.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {1} main.16bd2dbbc06007f15324.bundle.js (main) 154 kB [initial] [rendered]
chunk {2} styles.d9d6e24bded53673137d.bundle.css (styles) 137 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

WARNING in Invalid font values at 11:1. Ignoring.

Fonts will not work, because they are removed from the output bundle. If I just downgrade @angular/cli to 1.6.8 in the same project without applying any changes to project and build it in the prod mode it's working fine.

asfo · 2018-03-21T16:56:23Z

I'm facing this issue too.

But is weird because in my case the icons shows partially, just a couple of them are not being rendered and the worst part is that my images are not being rendered in any way and the console doesn't show any issue related with the images.

Also, when I run ng build --prod I lose my images and the FontAwesome.

bluecaret · 2018-04-05T20:53:14Z

@anton-gorbikov Did you ever find a solution to this? I'm getting the "Invalid font values" warning as well, except I'm not even sure what fonts it is affecting, I'm assuming font awesome.

anton-gorbikov · 2018-04-06T09:58:24Z

@bluecaret No, I have no solution/workaround for this issue. In my current project it affects all fonts, not just Font Awesome. So I just rolled back ng-cli to version 1.6.8

fergalmoran · 2018-04-07T09:40:54Z

Just tried with 1.7.4 (released 2 days ago) - issue is still present.

bart-kors · 2018-04-10T11:28:48Z

I had this problem in combination with nginx. When I added the following line to server part in nginx configuartion file it was resolved:
location ~* \.(eot|otf|ttf|woff|woff2)$ { root /usr/share/nginx/html; }

ImranAhmed · 2018-04-30T11:35:01Z

I am seeing this too.

Angular CLI: 1.7.4
Node: 8.9.1
OS: win32 x64
Angular: 5.2.10

Running: ng build --prod --output-hashing=all

WARNING in Invalid font values at 1405:2. Ignoring.

ghost · 2018-05-01T21:07:03Z

I can confirm this too.
Angular CLI: 1.7.4
Node: 8.4.0
OS: windows 10 x64
Angular: 5.2.10
Server: IIS 8.5
Running: ng build --prod
everything build fine, so errors or warnings
Publish the build to my server and fonts are all messed up.

If I build with angular/cli 1.6.8, everything is fine.
if I run ng server with angular/[email protected] everything is fine too.

Currently I have to use angular/[email protected] to build and publish. Hopefully update to angular/cli will fix the issue

angular/angular-cli#9648 (comment)

zartinn · 2019-01-08T10:36:06Z

I have the same issues after renaming my font from "MyFont" to "My Font"
I am pretty sure it has something to do with the space in between!

After using the seperate styles "font-family", "font-size"... it works again. With the "font" shortcut property it fails.

adripanico · 2019-01-08T10:54:42Z

I have the same issues after renaming my font from "MyFont" to "My Font"
I am pretty sure it has something to do with the space in between!

After using the seperate styles "font-family", "font-size"... it works again. With the "font" shortcut property it fails.

Of course it has something to do with the space. Have you read anything in this thread?

zartinn · 2019-01-08T10:58:15Z

Why so rude? Here are several ideas and comments to this problem. I have not seen/read your comment on that.

adripanico · 2019-01-16T11:47:37Z

Why so rude? Here are several ideas and comments to this problem. I have not seen/read your comment on that.

#9648 (comment)

CRACKISH · 2019-03-12T05:44:41Z

I have same warning.

I add my fonts in main styles.scss

and use this fonts in scss files

All work fine, but this warning infuriates me.

`
Angular CLI: 7.3.5
Node: 10.13.0
OS: win32 x64
Angular: 7.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.13.5
@angular-devkit/build-angular 0.13.5
@angular-devkit/build-optimizer 0.13.5
@angular-devkit/build-webpack 0.13.5
@angular-devkit/core 7.3.5
@angular-devkit/schematics 7.3.5
@angular/cdk 7.3.4
@angular/cli 7.3.5
@angular/material 7.3.4
@ngtools/webpack 7.3.5
@schematics/angular 7.3.5
@schematics/update 0.13.5
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
`

adripanico · 2019-03-13T14:33:05Z

Just remove the spaces from the font's filename.

alan-agius4 · 2019-03-13T17:36:00Z

Hi all,

There seems to be several issues being mentioned in the report, I will go though them a bit in detail here.

Filenames with spaces
A the moment there is a bug, which causes a build failure when a font filename has a space.

Font names with spaces
Some of the comments above report seeing this warning WARNING in Invalid font values at 3:4. Ignoring This is a bug in clean-css. (I’ll be opening an issue with them tomorrow and add a link below)

Both issues will be addressed in this PR #13903

If you are experiencing any other issues, kindly file a new issue with a minimal reproduction.

At the moment the uri of the font instead of spaced it will be `%20`, hence we need to decode it first before trying to resolve it. Fixes #9648

…thand is used At the moment when `font` shorthand property is used a warning is emitted when using this syntax ``` font: 10px "Font Awesome"; ``` This should be addressed by clean-css Fixes #9648

alan-agius4 · 2019-03-14T08:51:40Z

Clean-css issue clean-css/clean-css#1063

safalpillai · 2019-03-18T08:34:22Z

I was also getting the same error after using --prod flag. Removing the space in the font name in @font-face rectified the issue for me.

qortex · 2019-04-04T14:26:27Z

Found a workaround for the issue with space in font name:

as in CSS standard, enclose the font name in double quotes, and add a generic fallback. For me, it gives:

$regular-font: '"Open Sans", sans-serif';

and then I use this in font definition:

mat-typography-config( $font-family: $regular-font, /*...*/)

angular-automatic-lock-bot · 2019-09-09T16:41:17Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

hansl added the comp: cli/build label Feb 20, 2018

clydin added needs: repro steps We cannot reproduce the issue with the information given needs: more info Reporter must clarify the issue labels Feb 20, 2018

jeffgodwyll added a commit to GDGAccra/devfest18 that referenced this issue Oct 22, 2018

Include a web safe font to fix warnings

ff18d8c

angular/angular-cli#9648 (comment)

ngbot bot added this to the needsTriage milestone Jan 24, 2019

filipesilva added type: bug/fix help wanted freq2: medium severity3: broken and removed needs: more info Reporter must clarify the issue needs: repro steps We cannot reproduce the issue with the information given labels Jan 28, 2019

ngbot bot modified the milestones: needsTriage, Backlog Jan 28, 2019

filipesilva mentioned this issue Jan 29, 2019

Suspicious irregularity when --prod building font name with spaces #11679

Closed

alan-agius4 mentioned this issue Mar 13, 2019

fix(@angular-devkit/build-angular): resolve fonts with space in filename #13903

Merged

vikerman closed this as completed in #13903 Mar 13, 2019

vikerman pushed a commit that referenced this issue Mar 13, 2019

fix(@angular-devkit/build-angular): resolve fonts with space in filename

8d09594

At the moment the uri of the font instead of spaced it will be `%20`, hence we need to decode it first before trying to resolve it. Fixes #9648

This was referenced Apr 4, 2019

Invalid font values when using shorthand clean-css/clean-css#1063

Closed

Font shorthand quotes bug clean-css/clean-css#1057

Closed

clydin removed the help wanted label Jun 20, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

1.7.0 fonts are corrupted after prod build #9648

1.7.0 fonts are corrupted after prod build #9648

Comments

MateEke commented Feb 16, 2018

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

rajweb commented Feb 16, 2018

filipesilva commented Feb 16, 2018

MateEke commented Feb 16, 2018

clydin commented Feb 16, 2018

MattMorrisDev commented Feb 16, 2018 • edited Loading

clydin commented Feb 16, 2018

MattMorrisDev commented Feb 16, 2018 • edited Loading

clydin commented Feb 18, 2018 • edited Loading

MateEke commented Feb 18, 2018 • edited Loading

russ-blaisdell commented Feb 20, 2018

clydin commented Feb 20, 2018

andjiev commented Feb 20, 2018 • edited Loading

clydin commented Feb 20, 2018

russ-blaisdell commented Feb 20, 2018 • edited Loading

russ-blaisdell commented Feb 20, 2018

255kb commented Feb 22, 2018

TimoFrye commented Feb 23, 2018 • edited Loading

fergalmoran commented Mar 4, 2018

arrow-dev commented Mar 5, 2018 • edited Loading

anton-gorbikov commented Mar 15, 2018 • edited Loading

asfo commented Mar 21, 2018 • edited Loading

bluecaret commented Apr 5, 2018

anton-gorbikov commented Apr 6, 2018

fergalmoran commented Apr 7, 2018

bart-kors commented Apr 10, 2018

ImranAhmed commented Apr 30, 2018

ghost commented May 1, 2018

zartinn commented Jan 8, 2019

adripanico commented Jan 8, 2019

zartinn commented Jan 8, 2019

adripanico commented Jan 16, 2019

CRACKISH commented Mar 12, 2019

Package Version

adripanico commented Mar 13, 2019 • edited Loading

alan-agius4 commented Mar 13, 2019 • edited Loading

alan-agius4 commented Mar 14, 2019

safalpillai commented Mar 18, 2019

qortex commented Apr 4, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

MattMorrisDev commented Feb 16, 2018 •

edited

Loading

MattMorrisDev commented Feb 16, 2018 •

edited

Loading

clydin commented Feb 18, 2018 •

edited

Loading

MateEke commented Feb 18, 2018 •

edited

Loading

andjiev commented Feb 20, 2018 •

edited

Loading

russ-blaisdell commented Feb 20, 2018 •

edited

Loading

TimoFrye commented Feb 23, 2018 •

edited

Loading

arrow-dev commented Mar 5, 2018 •

edited

Loading

anton-gorbikov commented Mar 15, 2018 •

edited

Loading

asfo commented Mar 21, 2018 •

edited

Loading

adripanico commented Mar 13, 2019 •

edited

Loading

alan-agius4 commented Mar 13, 2019 •

edited

Loading