3

During migrating from angular v15 to v16 in a nx environment, my build process encounters with lots of errors regarding to my form of addressing assets in scss files.

For example:

✘ [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...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I didn't try using relative path because I need to do it the way it is regarding to maintain development experience.

Any solutions?

Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54

1 Answers1

3

What solved my issue is adding the following to angular.json:

"stylePreprocessorOptions": {
  "includePaths": [""]
},
vlio20
  • 8,955
  • 18
  • 95
  • 180