CODEWITHSUNDEEP
angular-cliangular-upgrade
user26436857
user26436857

Reputation: 21

Custom angular library upgrade to Angular 14 from 13, giving error on compile "Cannot read assets from a location outside of the project root."

We have an Angular library project which is using another library for images. Some of our scss are using images as background-image from this library. It used to work prior to 14 version without any issue. We are upgrading library from Angular 10 to 14.Till 13 version it compiles successfully without error and creating dist folder but on upgrading to 14 version , first it gives some warning about unable to read image file and these will be ignored and then failed on copy assets stage with error.. warning:

WARNING: postcss-url: C:\my-lib\grid\grid.scss:486:3: Can't read file 'C:\my-lib\grid\img\sprites.png', ignoring

Error:

× Copying assets
Cannot read assets from a location outside of the project root.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-common: `ng build --project=ng-solution-common-ui-library --configuration production`

Our scss file have specified background-image like below:

css-class{
  background-image: url('img/sprites.png');
      }

Please Note that I cannot specify assets folder in angular.json on a library project. Also this another library having images is a npm dependency and is under node_modules..

Part of Angular.json configuration

"projectType": "library",
      "root": "projects/my-library",
      "sourceRoot": "projects/my-library/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/my-library/tsconfig.lib.json",
            "project": "projects/my-library/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/my-library/tsconfig.lib.prod.json"
            }
          }

I am stuck on this for a long time. Any help would be really appreciated.

Thanks Nishtha

I have tried to give complete path to library in scss file like css-class{ background-image: url('second-lib/img/sprites.png'); } Please note this second-lib is also with us , designed only to keep css and images at common place.

I have tried to add assets, stylePreprocessorOptions in angular.json, but both are not allowed under it.

Underlined NodeJS is 14.

Upvotes: 2

Views: 304

Answers (1)

Vítor Belim
Vítor Belim

Reputation: 36

The Cannot read assets from a location outside of the project root. error can also be triggered when the folder that is being accessed does not exist.

In my case, I had one of my nx libraries' ng-package.json file with the configuration "assets": ["public"], when that library did not have a libs/lib-name/public folder. This configuration worked well until an automatic Node update in the CI, from v22.9.0 to v23.0.0.

Maybe it is worth investigating if your configuration files could be referencing folders that do not exist.

Upvotes: 2

Related Questions