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?

Answer 1

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

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

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.