Angular CLI production build placing duplicates of all my fonts in the root of my dist directory. Can this be avoided?

Question

In my Angular project, i have custom fonts stored in src/assets/fonts/*

I reference these fonts in my styles.scss file like this:

@font-face {
    font-family: 'museo_sans_package';
    src: url('assets/fonts/MuseoSans_100-webfont.eot');
...

When doing a production build using the Angular CLI, my fonts directory along with all the font files in it are copied to my ./dist directory correctly:

./dist/assets/fonts/*

however all of my font files are also getting duplicated into the root of my /dist directory as well resulting in 2 copies of my fonts. One in ./dist/assets/fonts/* as expected, and also in ./dist/* which i do not want.

Is there a configuration i need to set somewhere to avoid this?

UPDATE: the fonts are copied to the ./dist/assets/fonts directory because the .angular-cli.json config is set to dup assets into the dist directory.

The duplication of my fonts into the root of .dist is being caused by either the sass compiler or the angular cli build process or both in that something is modifying the paths set in the urls for my @font-face rules, changing them to point to the root rather than the relative path assets/fonts/*

my current angular install:

@angular/cli: 1.1.0
node: 8.0.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Jalali Shakib Jalali Shakib · Accepted Answer · 2020-05-30T10:25:52

I had the same issue and fixed it by adding an slash at the beginning of the font url like this:

src: url('/assets/fonts/MuseoSans_100-webfont.eot');

Angular CLI production build placing duplicates of all my fonts in the root of my dist directory. Can this be avoided?

3 Answers