angular / angular/angular-cli

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

Aberta
#24,470 14 comentários 10 reações 0 responsáveis Ver no GitHub
area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low needs: investigation severity3: broken type: bug/fix
Linguagem predominante
TypeScript
Estrelas
27k
Forks
11.8k
Merge médio
14h 23min
PRs com merge (30d)
162

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Reproduza o build a partir de src/styles.scss usando font-awesome@4.7 e as referências url() relatadas. Comece rastreando o caminho de resolução de angular-css-resource e como os package deep imports são tratados; estará concluído quando o build do Angular CLI resolver os recursos de fonte sem os erros relatados.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
angular, scss, typescript, webpack
Domínio
build-system
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.