Pesquisa de site

typescript - angular erro do navegador-esbuild: Não foi possível resolver o caminho absoluto [plugin angular-css-resource]

Durante a migração do Angular v15 para o v16 em um ambiente nx, meu processo de build encontra muitos erros relacionados à minha forma de acessar ativos em arquivos scss.

Por exemplo:

✘ [ERROR] Could not resolve "~apps/platform/src/assets/img/bank-card-overlay.png" [plugin angular-css-resource]

    apps/platform/src/app/shared/components/add-credit-card-modal/add-credit-card-modal.component.scss:40:24:
      40 │ ...image: url("~apps/platform/src/assets/img/bank-card-overlay.png");
         ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can remove the tilde and use a relative path to reference it, which should remove this error.
  The plugin "angular-compiler" was triggered by this import

    apps/platform/src/app/shared/components/add-credit-card-modal/add-credit-card-modal.component.ts:3:33:
      3 │ ...CE__1 from "angular:jit:style:file;./add-credit-card-modal.compo...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Eu não tentei usar caminho relativo porque preciso fazê-lo do jeito que é para manter a experiência de desenvolvimento.

Alguma solução?

Resposta #1

O que resolveu meu problema foi adicionar o seguinte ao angular.json:

"options": {
  "stylePreprocessorOptions": {
    "includePaths": [""]
  },
}

Resposta #2

Certifique-se de que seus recursos estão configurados corretamente no angular.json:

"assets": [
     "src/assets"
 ],

Agora sua pasta de ativos deve estar na pasta src do seu projeto. Se você tiver uma imagem na sua pasta de ativos chamada Solar.jpg, então você poderá referenciar essa imagem no scss com o seguinte código:

em app.component.scss:

.myImage {
    height: 200px;
    background-image: url('/assets/Solar.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

Observe que com arquivos scss você precisa ter uma '/' antes dos assets. Mas se você referenciar um asset em seus arquivos .html, então deve ser sem a '/', por exemplo, "assets/Solar.jpg". Não entendo por que o Angular fez assim.

Artigos relacionados