angular 9 library publish error "Trying to publish a package that has been compiled by Ivy"

Question

I migrated my angular 8.x.x project to angular 9.x.x and when I try to publish my library, it fails with below error

npm ERR! @candiman/website@9.0.0 prepublishOnly: node --eval "console.error('ERROR: Trying to publish a package that has been compiled by Ivy. This is not allowed.\nPlease delete and rebuild the package, without compiling with Ivy, before attempting to publish.\n')" && exit 1

is there anything changed in the angular 9

Does this answer your question? [How to compile a library without Ivy?](https://stackoverflow.com/questions/59113052/how-to-compile-a-library-without-ivy) — R. Richards, Feb 14 '20 at 22:02
this issue is related to angular 9 migration @R.Richards. the other one is related to normal and most of the people will fall into this issue as it will pop up during migration. — Aniruddha Das, Feb 14 '20 at 22:18

score 72 · Accepted Answer · edited Jun 30 '21 at 15:13

72

UPDATE ANGULAR 12

using the --configuration production option while building the library fixed my issue

ng build --configuration production

Original answer:

using --prod option while building the library fixed my issue

ng build yourLibraryName --prod

edited Jun 30 '21 at 15:13

Francesco Borzi

56,083
47
179
252

answered Feb 14 '20 at 22:01

Aniruddha Das

20,520
23
96
132

And what is your --prod configuration? – codeepic Apr 30 '20 at 13:07
actually --prod is a flag passed to angular cli configuration to say its a prod build so dont do a aot/ivy build – Aniruddha Das Apr 30 '20 at 22:10
Yes - but it still has to be set up as `production` configuration for your library in `angular.json` file - otherwise you will get an error saying there is no production configuration when you try to run in. – codeepic May 01 '20 at 23:15
@codeepic, hann, good point. I actuality did not tried that. thanks for adding that as a note – Aniruddha Das May 01 '20 at 23:59
1

adding --prod worked and no, you should not write production. The environment config and the flag --prod are 2 different things – Johansrk May 14 '20 at 07:26
3

@AniruddhaDas also be sure to do `ng build yourLibraryName --prod` **after** `ng test --watch=false`. Ng test will also compile your library getting then the error: `ERROR: Trying to publish a package that has been compiled by NGCC. This is not allowed.` – rbelow Jun 10 '20 at 16:15
Wouldn't it be great if this was included in the output message!??!!!! – Ben Winding Oct 28 '20 at 06:42

codeepic · Answer 2 · 2020-05-02T00:10:51.680

According to official Angular docs https://angular.io/guide/ivy#opting-out-of-ivy-in-version-9

it is better to opt out from Ivy compiler to use the older View Engine when building and publishing your library by adding this line:

enableIvy: false

to angularCompilerOptions in tsconfig.json file at the root of your library as can be seen below;

I've tried it after updating my Angular library to Angular version 9 and this one small change worked like a charm.

score 23 · Answer 3 · answered Jun 30 '21 at 15:42

Fix for Angular 12+ missing component style issue

On Angular 12, while using:

ng build --configuration production

indeed solved the original issue for me, it also introduced a new one: the styles of my library component where completely missing.

I've solved this other problem by replacing:

  "angularCompilerOptions": {
    "enableIvy": false
  }

with:

  "angularCompilerOptions": {
    "compilationMode": "partial"
  }

in projects/my-library/tsconfig.lib.prod.json

Source: https://angular.io/guide/creating-libraries#building-libraries-with-ivy

score 7 · Answer 4 · answered Oct 15 '20 at 23:35

In my case none of the solutions above worked. I noticed however that in the package.json of my library in the dist folder there is an newly added script (probably added because of this):


  "scripts": {
    "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by NGCC. This is not allowed.\\nPlease delete and rebuild the package, without compiling with NGCC, before attempting to publish.\\nNote that NGCC may have been run by importing this package into another project that is being built with Ivy enabled.\\n')\" && exit 1"
  }

SO here either remove/replace the prepublishOnly script or publish using npm publish --ignore-scripts

Is it because you're trying to publish a package that starts from 'ng-'? — Dmitry Grinko, Dec 01 '20 at 22:53

score 5 · Answer 5 · edited Feb 26 '21 at 11:18

While building my libraries with ng build --prod and enableIvy = false in tsconfig.lib.json I was getting the same "prepublishOnly" script added to my workspace package.json as Melchia had.

The reason why seems to be related to using a private repository via publishConfig/registry in each library's package.json, as stated in https://github.com/angular/angular/issues/37973#issuecomment-656136865

When building Angular libraries for publishing, use ng build --prod, enableIvy = false in library's tsconfig.json and, if working with a private repository, npm publish --ignore-scripts

score 2 · Answer 6 · answered Apr 20 '21 at 10:36

In addition to adding the --prod flag, if you're running on a really old version, you'll also need the following update to angular.json:

    "myproject": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              "tsConfig": "projects/mypath/tsconfig.lib.prod.json"
            }
          }
        },

with the content of that file being:

{
  "extends": "./tsconfig.lib.json",
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

You can check if you're on such an old version if you still have the following lines in angular.json:

            "production": {
              "project": "projects/tsmean/spinner/ng-package.prod.json"
            }

score 2 · Answer 7 · answered Aug 22 '21 at 03:15

In your angular.json file, you have a build object in your library tree. Inside build, you have a configurations object, that contains a production object and probably a development object too.

Inside build object define a new property called defaultConfiguration, and set the value: production that match with the name of the production property inside configurations object.

Your angular.json file should look like this:

"architect": {
  build": {
    "builder": "@angular-devkit/build-ng-packagr:build",
    "options": {
      "tsConfig": "projects/ngx-custom-tooltip/tsconfig.lib.json",
      "project": "projects/ngx-custom-tooltip/ng-package.json"
    },
    "configurations": {
      "production": {
        "tsConfig": "projects/ngx-custom-tooltip/tsconfig.lib.prod.json"
      },
      "development": {
        "tsConfig": "projects/ngx-custom-tooltip/tsconfig.lib.json"
      }
    },
    "defaultConfiguration": "production"
  },
  ...
}

Your tsconfig.lib.prod.json should contains this object:

"angularCompilerOptions": {
  "enableIvy": false
}

Finally, yo can execute ng build your-library-name

score 2 · Answer 8 · answered Mar 14 '23 at 08:56

2

Solved this by simply adding the following to tsconfig.lib.prod.json

"angularCompilerOptions": {
    "compilationMode": "partial",
}

answered Mar 14 '23 at 08:56

umunBeing

514
1
5
15

Thanks!!, really not good not finding this in angular Doc, at least not so easy – Oswaldo Zapata Jul 09 '23 at 22:27
I had to run production command with flag `--configuration production` that forced to pick `.prod.json` configs – Arham Anees Aug 16 '23 at 06:53

score 1 · Answer 9 · answered Aug 05 '21 at 09:54

1

Adding

"compilationMode": "partial"

to

"angularCompilerOptions": {

}

Solved my problem

answered Aug 05 '21 at 09:54

ASANIAN

372
2
8

2

This has already been mentioned in [Francesco's anser](https://stackoverflow.com/a/68197875/2227743). – Eric Aya Aug 05 '21 at 11:50
Actually this is the exact solution, no long modification needed as discussed in answer you are referencing – ASANIAN Aug 06 '21 at 05:56

Sahil Babbar · Answer 10 · 2023-02-16T07:52:52.210

Angular team doesn't allow to publish library in full Ivy mode to NPM as it is highly probable that applications that will consume it, will be built using partial Ivy mode. This will cause compatibility problems.

So, to get out of this situation, you may use the following hack:

Assumption: You will ensure that your consumer application & library are built using full Ivy mode. And any application built using partial Ivy mode will not consume your library. Moreover, both application and library are built using exact same version of Angular.

Hack: Just before publishing your library, you can remove the script from dist/.../package.json, that prevents the library from publishing.

More information: This has been discussed at length with Angular team here. To summarize you may start reading the thread from here.

angular 9 library publish error "Trying to publish a package that has been compiled by Ivy"

10 Answers10

Fix for Angular 12+ missing component style issue

Linked