angular browser-esbuild error: Could not resolve absolute path [plugin angular-css-resource]

Question

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?

Salisbarry

Were you able to solev it? – Carlinecarling

I ended up replace all the paths and it took a lot of time. No general and valid solution. @Carlinecarling – Salisbarry

Found a solution, check mmy answer. – Carlinecarling

Answer 1

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

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

Carlinecarling

This did not completly fix my problem. I ended up doing what @Mahdi Zarei did :"replace the paths " – Deposal

This didn't do anything. I have some paths of '^assets/..' in my project and it works in electron, but not when building a certain project. – Acima

Answer 2

Ensure you have your assets set up correctly in angular.json:

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

Now your assets folder should be in src folder in your project. If you have an image in your assets folder named Solar.jpg then you will be able to reference this image in scss by the following code:

in app.component.scss:

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

Note with scss files you have to have a '/' before assets. But if you reference an asset in your .html files then it should be without the '/', e.g. "assets/Solar.jpg". Don't understand why Angular made it this way.

Acima