Angular-cli: fonts of third party css in dist/ root

[maxkarkowski]

node --version
v4.6.0
npm --version
3.10.8
[email protected]

i have my own css library which i added in the angular-cli.json.

this library hast a font-face in its css like so:

@font-face {
    font-family: 'Interstate';
    src: url("**../fonts/**interstate-bold/86bef0b5-fa75-4ca3-8394-cb7b5a474a45-2.eot");
    font-style: normal;
    font-weight: bold
}

so i assumed if i run ng build the fonts would appear in a font folder or somehow in the assets folder.

but if i run ng build the font will placed in the dist/root folder like so

dist/
   fontfile.eot

in my case this looks like this

can i somehow specify it that assets like this will not be placed in the root?

[Mage111]

I also have this problem in [email protected]
with fonts that refer to assets folder

[Meligy]

Assets changed in a bit recently. Can you please try it out with beta.19-3 or beta.20-4?

[Mage111]

I upgraded to beta.20-4 and the problem still occurred.
All the fonts placed and referenced to assets folder.

[image: תמונה מוטבעת 1]

2016-11-16 22:08 GMT+02:00 Meligy, GuruStop.NET [email protected]:

Assets changed in a bit recently. Can you please try it out with beta.19-3
or beta.20-4?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/3143#issuecomment-261056853,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWZhRmOICtKu2XSjrpBnE1boHWk7fb9Sks5q-2K3gaJpZM4KyZIK
.

[Meligy]

What's the assets property in your angular-cli.json like?

[Mage111]

Assets is folder in src folder. all resources referred to this folder.
angular-cli.json look like:

"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",

[Meligy]

And you are sure you don't have copies of the files in src/assets?

[Mage111]

yes, I have placed the resources files in src/assets. in the build (prod), the folder src/assets has been copied to dist/assets. it works as expected for images, but not for fonts.

[Mage111]

I realize that something is wrong in my project structure. but what? Could you help me please?

[fellsquare]

I am facing the same issue. I generated the project using cli commands and didn't modify the structure. Is that an issue with cli itself or some specific configuration needs to be done to make it work?

[filipesilva]

Files in assets are copied wholesale and are not preprocessed in any way. It's a completely different pipeline from CSS processing.

So if you reference fonts in css, they'll just be processed/hashed/etc and put in the root.

https://github.com/angular/angular-cli/pull/3285 is nearing completion and will allow all resources to be moved to another path.

[prafful-garg]

@maxkarkowski can you please let me know if you have fixed this issue, as i am also facing the same issue and unable to fix.

[Mage111]

Not fixed yet.

[punekiran]

Any update on this, I'm facing the same issue.

[raoghuge]

Is this fixed yet. I am yet facing the same issue.

[mecheri]

I am also facing the same issue.

[filipesilva]

This is intended behaviour:

So if you reference fonts in css, they'll just be processed/hashed/etc and put in the root.

[mmeylan]

@filipesilva Is there any way to change this behaviour ? My use case is I want to serve all assets (fonts referenced in the css included) from a CDN.

This is intended behaviour:
So if you reference fonts in css, they'll just be processed/hashed/etc and put in the root.

[smoke]

I have faced, the same problem and as far as I have looked there is no option to do so.
I ended up with a custom script doing that.
In short:

• on ng build I set --deploy-url to '/__will-be-replaced-by-cdn-path__/'
• after the build I replace '/__will-be-replaced-by-cdn-path__/' in all files with the real absolute URL to the cdn, this replaces references to images in the templates also.
• after that you should place everything on the cdn, but the index.html file, you can serve it from wherever needed

I really hope this is supported from the cli any time soon.

[mmeylan]

@smoke Totally with you there ! Would you agree to share the code / script you used in order to accomplish this ?

[ghost]

I really think this issue should to be reopened. There is an option within the .angular-cli.json to output styles into a subfolder but this will break the font path as the fonts are always output to the root folder.

"styles": [
  {
    "input": "themes/theme1.scss",
    "output": "assets/theme1",
  }
]

I have tried:

"assets": [
  "assets",
  {
    "glob": "**/*", 
    "input": "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts", 
    "output": "/assets/" 
  }
],

but this fails with error:

An asset cannot be written to a location outside the project.

[johanroug]

It works for me now
The trick is to make absolute path in CSS
I am working with Angular 6

$fontpath: "/assets/fonts/";
@font-face {
    font-family: 'myFont';
    src: url($fontpath + myFont.eot');
    src: url($fontpath + myFont?#iefix') format('embedded-opentype'),
        url($fontpath + 'myFont.woff2') format('woff2'),
        url($fontpath + 'myFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

and in Angular.json file

"assets": [
              "src/assets/fonts"
            ],

[ldavidson]

I was having an issue with this and have found the solution for me to this issue.
Looked at the angular starter webpack config files I figured out how to change the output folder. This will not require any changes to embedded fonts.
javascript { test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/, use: { loader: 'file-loader', options: { outputPath: '<the folder you want your fonts to go>' } } }

[mauro1998]

@johanroug is right, this worked for me as well;

_fonts.scss:

$font-path: '/assets/fonts/';

angular-cli.json:

"assets": [
    "assets",
    "favicon.ico"
],

[sebastian-zarzycki-es]

Most solutions people paste here are solutions for their local files, not for css fonts imported from node_modules. Lots of confusion. For local files, just use absolute paths. For node_modules - I don't know of any.

@ldavidson , I've tried that and it didn't seem to influence anything (Angular 7). It ignored anything I've put into outputPath.

[TheILPlace]

Most solutions people paste here are solutions for their local files, not for css fonts imported from node_modules. Lots of confusion. For local files, just use absolute paths. For node_modules - I don't know of any.

@ldavidson , I've tried that and it didn't seem to influence anything (Angular 7). It ignored anything I've put into outputPath.

absolute path is not a good option, if you use ng build with --base-href , as it will put the basehref folder inside the css files. which will cause problems if you deploy to multiple locations under different folders

[LeTranAnhVu]

@sebastian-zarzycki-es : Hi , I'm facing the same issue. I have solved the local files by using absolute path, but I stuck in some plugin or lib in the bower_components.
Have you found the solutions?

[sebastian-zarzycki-es]

Nope. I would expect CLI handles it properly on its own. Ideally sooner, than later.

[naman1901]

This should be re-opened and fonts moved to a non-root folder in dist. Otherwise, it just looks super-unorganized.

[RscAnonymous]

I am using a third party library in my angular project, which might be using absolute path thus my ng prod is placing all the fonts and images used by it in the root directory. Any workaround on this?

[jcimoch]

I think this should be reopened

[nilesh1chavan]

Please reopen this and if there any solution, put it here

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