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

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?

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

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