[Esbuild] Creating a font-face with a local font throws "No loader is configured for .ttf/.woff/.woff2 files"

[AGrigoruta]

Command

build, serve

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

We are currently migrating our application from a custom webpack to esbuild and encountered a build error when creating a custom font face.

There is a similar issue mentioned in #23698 in the conversation here. It looks like the bug was fixed in #23706 and pushed in v14.1.x but it seems to reproduce again.

I added a number of debuggers in css-resource-plugin.js to see if the the font files are found and read and it seems like they are picked up:

node_modules/@angular-devkit/build-angular/src/tools/esbuild/stylesheets/css-resource-plugin.js

build.onLoad({ filter: /./, namespace: 'css-resource' }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
    const resourcePath = (0, node_path_1.join)(build.initialOptions.absWorkingDir ?? '', args.path);
    console.log('onLoad: ', resourcePath);
    console.log('onLoad content: ', await (0, promises_1.readFile)(resourcePath));
    return {
        contents: await (0, promises_1.readFile)(resourcePath),
        loader: 'file',
        watchFiles: [resourcePath],
    };
}));

output:

⠼ Building...onLoad:  D:\app\my-app\src\app\content\shared\icons\customicons.woff2
onLoad:  D:\app\my-app\src\app\content\shared\icons\customicons.ttf
onLoad:  D:\app\my-app\src\app\content\shared\icons\customicons.woff
onLoad content:  <Buffer 77 4f 46 32 00 01 00 00 00 00 4a 50 00 0f 00 00 00 00 a4 60 00 00 49 f2 00 01 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 1a 16 ... 18974 more bytes>
onLoad content:  <Buffer 00 01 00 00 00 11 01 00 00 04 00 10 4c 54 53 48 08 a4 db 0c 00 00 04 80 00 00 00 a6 4f 53 2f 32 90 29 ec 2f 00 00 01 98 00 00 00 60 56 44 4d 58 6e 9d ... 48674 more bytes>
onLoad content:  <Buffer 77 4f 46 46 00 01 00 00 00 00 5f 04 00 0f 00 00 00 00 a3 f8 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 47 44 45 46 00 00 ... 24274 mor

Any help is appreciated.

Minimal Reproduction

angular.json

...
  "builder": "@angular-devkit/build-angular:browser-esbuild"
...

src/app/content/shared/css/fonts.css

@font-face {
  font-family: 'CustomIcons';
  src: local("Custom Generic Icons"), local("custom_generic_icons"), url('../icons/customicons.woff2') format('woff2'), url('../icons/customicons.woff') format('woff'), url('../icons/customicons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

src/app/content/shared/icons folder contains the three fonts that are part of the url from the above font-face

└── src
    └── app
        └── content
            └── shared
                └── css
                    ├── fonts.css
                └── icons
                    ├── customicons.ttf
                    ├── customicons.woff
                    ├── customicons.woff2

Exception or Error

[ERROR] No loader is configured for ".woff2" files: src/app/content/shared/icons/customicons.woff2

    src/app/content/shared/css/fonts.css:3:81:
         3 │ ...neric_icons"), url('../icons/customicons.woff2') format('woff2'),...
           ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] No loader is configured for ".woff" files: src/app/content/shared/icons/customicons.woff

    src/app/content/shared/css/fonts.css:3:128:
         3 │ ...rmat('woff2'), url('../icons/customicons.woff') format('woff'), u...
           ╵                       ~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] No loader is configured for ".ttf" files: src/app/content/shared/icons/customicons.ttf

    src/app/content/shared/css/fonts.css:3:173:
         3 │ ... format('woff'), url('../icons/customicons.ttf') format('truetype');

Your Environment

Angular CLI: 16.2.0
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 16.2.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   16.2.0
@angular-devkit/core            16.2.0
@angular-devkit/schematics      16.2.0
@angular/cli                    16.2.0
@schematics/angular             16.2.0
rxjs                            7.8.1
typescript                      4.9.3
webpack                         5.78.0
zone.js                         0.13.1

Anything else relevant?

No response

[clydin]

How is the project using the src/app/content/shared/css/fonts.css file? (global stylesheet via styles option, @import in another stylesheet, etc.)

[AGrigoruta]

Hey Charles, it's a global stylesheet

[CommonGuy]

Same problem for me, but with an imported stylesheet. It works with ng serve, but fails when building a production build.

[celian-garcia]

Same here. I'm struggling with that for several days. It looks like some people use

esbuild ... --loader:.woff=file --loader:.woff2=file ...

but I've no idea how to do this with the angular builder.

[alan-agius4]

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[CommonGuy]

It's not that "minimal", but I've setup a repro here: https://github.com/CommonGuy/angular-esbuild-ttf-repro.

1. Installed monaco-editor
2. Imported monaco-editor in the app component
3. Created an editor instance in the app component
4. ng serve works
5. ng build fails with the mentioned error

Note: A similar issue #25235 was closed. But since esbuild can handle this case just fine during ng serve, IMO it should also be able to do this with ng build.