.angular-cli.json styles not working properly

[leobispo]

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

[ghost]

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.

[leobispo]

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

[ghost]

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.

[leobispo]

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

[thbiela]

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

[MattiJarvinen]

Related? #8758

[Maximaximum]

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

[baswanders]

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" ] }

[Splaktar]

Is this still an issue? I would think that it is fixed in the latest v7 build. If so, can you please close it?

[angular-automatic-lock-bot[bot]]

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.}