Description
Command
build
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
[reopen of #6599]
The problem
Two copies of the same font are appearing in the dist directory after ng build
: One, located in the the assets/fonts folder
, other in the root of dist
(actually, as this projects is using i18n, at the root of each language folder):
The one at the "root" have a random string attached before the .woff2. Generated by a post-processor of CSS for what I understand. The bundled CSS in the dist
folder references it.
Besides the increase in size of the build output, one thing that is not working is preloading fonts in the src/index.html
file. Using href="assets/fonts/font.woff2"
in a <link rel="preload">
tag will make the browser download this font, not use it, and download the version imported in the bundled CSS file in the root of dist
.
Expected behavior
I expected the bundled CSS to reference the font file inside the assets folder, not it to create another font in the root of the output files. Is there a configuration in angular.json
that may prevent this behavior? Do I have to create a webpack configuration file?
Minimal Reproduction
- Have a font inside
src/assets/fonts/font.woff2
; - Import it in a
@font-face
in the formatsrc: url('assets/fonts/font.woff2')
in thesrc/styles.scss
file; - Build the project using
ng build
command;
My settings is closer to @ziemerz in #6599 as I am also using i18n. So changing src: url('assets/fonts/font.woff2')
to an absolute path like src: url('/assets/fonts/font.woff2')
will not work for me.
Reproduction repository: https://github.com/arturo32/angular-fonts-paths/tree/main
Exception or Error
Your Environment
Angular CLI: 16.2.16
Node: 22.9.0 (Unsupported)
Package Manager: npm 10.8.3
OS: linux x64
Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.16
@angular-devkit/build-angular 16.2.16
@angular-devkit/core 16.2.16
@angular-devkit/schematics 16.2.16
@angular/cdk 16.2.14
@angular/cli 16.2.16
@angular/material 16.2.14
@schematics/angular 16.2.16
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.3
Anything else relevant?
No response