Angular-cli: .angular-cli.json styles not working properly

Created on 22 Mar 2018 · 10Comments · Source: angular/angular-cli

Versions

Angular CLI: 6.0.0-beta.6
Node: 9.8.0
OS: linux x64
Angular: 6.0.0-rc.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

@angular/cli: 6.0.0-beta.6
@angular/flex-layout: 5.0.0-beta.13
@angular-devkit/architect: 0.0.7
@angular-devkit/build-optimizer: 0.4.6
@angular-devkit/build-webpack: 0.0.7
@angular-devkit/core: 0.4.6
@angular-devkit/schematics: 0.4.6
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.6
@schematics/angular: 0.4.6
@schematics/package-update: 0.4.6
typescript: 2.7.2
webpack-bundle-analyzer: 2.10.0
webpack: 4.1.1```

### Repro steps

I added the following Styles in .angular-cli.json

{
"styles": [
"../node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css",
"../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
]
}

Observed behavior

if I access my app using the root URL it is working as expected:

https://myapp.com

when I access my app with a path that is not root, it is not working anymore.

https://myapp.com/section/123456

It can't find the fonts, because it is trying to fetch not from the root.

https://myapp.com/section/123456/fonts/Material-Design-Iconic-Font.woff2

instead of

https://myapp.com/fonts/Material-Design-Iconic-Font.woff2

Source

leobispo

👍1

Most helpful comment

It makes sense... I am checking how to handle external resources using sw... but I just checked it is possible. Thx for the comment.

Anyway, the bug is still there and should be fixed

leobispo on 30 Mar 2018

👍4

All 10 comments

For these 2 specific resources, you're better off just adding those to the index.html pointed to a popular cdn instead of bundling and serving these.

You may have better luck just using scss and importing them in the styles.scss file, but honestly for fonts, CDN is the way to go.

ghost on 30 Mar 2018

👍1

@robertbaker is there any reason to say that or is this just your opinion?

In my opinion this is a bug and should be fixed, because it was working in the previous version.

leobispo on 30 Mar 2018

👍1

It's best practice. highly popular fonts are better just using a <link> in the html pointed to their CDN, because there's a good chance the browser has it already cached from some other website. It's pretty much guaranteed that Roboto is already in users' cache, since Google uses it everywhere, including chrome. Fonts are big to download and heavy to load in the browser, gotta save time where you can.

ghost on 30 Mar 2018

👍2

It makes sense... I am checking how to handle external resources using sw... but I just checked it is possible. Thx for the comment.

Anyway, the bug is still there and should be fixed

leobispo on 30 Mar 2018

👍4

I also experience this issue since upgrading to v. 6.0.0.

thbiela on 13 Apr 2018

Related? #8758

MattiJarvinen on 19 Apr 2018

I've got a similar issue: fonts loaded via url() do not get it into the bundle when using AOT compilation

Maximaximum on 14 May 2018

The path to node_modules has to be changed to:
node_modules

{
"styles": [
"node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css",
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
]
}