angular / angular/angular-cli

Webpack sometimes does not properly resolve `url()` resources from package deep imports

Abierto
#24,470 14 comentarios 10 reacciones 0 asignados Ver en GitHub
area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low needs: investigation severity3: broken type: bug/fix
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
14 h 23 min
PR fusionados (30 d)
162

Descripción

### 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

I'm getting an error for fontawesome & icomoon references when switching to esbuild. It works fine for default angular build

### Minimal Reproduction

1. Install font-awesome@4.7
2. Reference it from styles as `@import 'font-awesome/scss/font-awesome';`

### Exception or Error

```text
X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.eot?p2jara"

src/styles.scss:10:11:
10 │ src: url("fonts/icomoon.eot?p2jara");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "fonts/icomoon.eot?p2jara" as external to exclude it from the bundle, which will remove this error.

X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.eot?p2jara#iefix"

src/styles.scss:11:11:
11 │ src: url("fonts/icomoon.eot?p2jara#iefix") format("embedded-open...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "fonts/icomoon.eot?p2jara#iefix" as external to exclude it from the bundle, which will remove this error.

X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.ttf?p2jara"

src/styles.scss:11:78:
11 │ ...ed-opentype"), url("fonts/icomoon.ttf?p2jara") format("truetype...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "fonts/icomoon.ttf?p2jara" as external to exclude it from the bundle, which will remove this error.

X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.woff?p2jara"

src/styles.scss:11:130:
11 │ ...("truetype"), url("fonts/icomoon.woff?p2jara") format("woff"), ...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "fonts/icomoon.woff?p2jara" as external to exclude it from the bundle, which will remove this error.

X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.svg?p2jara#icomoon"

src/styles.scss:11:179:
11 │ ...at("woff"), url("fonts/icomoon.svg?p2jara#icomoon") format("svg");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "fonts/icomoon.svg?p2jara#icomoon" as external to exclude it from the bundle, which will remove this error.

X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.eot?v=4.7.0"

src/styles.scss:11383:11:
11383 │ src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0"

src/styles.scss:11384:11:
11384 │ src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") f...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.woff2?v=4.7.0"

src/styles.scss:11384:95:
11384 │ ...pe"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") form...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.woff?v=4.7.0"

src/styles.scss:11384:162:
11384 │ ...f2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") forma...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.ttf?v=4.7.0"

src/styles.scss:11384:227:
11384 │ ...ff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular"

src/styles.scss:11384:295:
11384 │ ...pe"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawes...
```

### Your Environment

```text
Angular CLI: 15.0.4
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1500.4
@angular-devkit/build-angular 15.0.4
@angular-devkit/core 15.0.4
@angular-devkit/schematics 15.0.4
@angular/cdk 15.0.3
@schematics/angular 15.0.4
rxjs 7.8.0
typescript 4.8.4
```

### Anything else relevant?

_No response_

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduce el build desde src/styles.scss usando font-awesome@4.7 y las referencias url() indicadas. Empieza rastreando la ruta de resolución de angular-css-resource y cómo se gestionan los package deep imports; estará terminado cuando el build de Angular CLI resuelva los recursos de fuentes sin los errores indicados.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, scss, typescript, webpack
Área
build-system
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.