angular 9 库发布错误 "Trying to publish a package that has been compiled by Ivy"

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

我将我的 angular 8.x.x 项目迁移到 angular 9.x.x,当我尝试发布我的库时,它失败并出现以下错误

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

angular 9

有什么变化吗

更新ANGULAR12

在构建库时使用 --configuration production 选项解决了我的问题

ng build --configuration production

原回答:

在构建库时使用 --prod 选项解决了我的问题

ng build yourLibraryName --prod

根据官方 Angular 文档 https://angular.io/guide/ivy#opting-out-of-ivy-in-version-9

最好在构建和发布库时选择退出 Ivy 编译器以使用旧的 View Engine,方法是添加以下行:

enableIvy: false

到库根目录 tsconfig.json 文件中的 angularCompilerOptions,如下所示;

我在将我的 Angular 库更新到 Angular 版本 9 后尝试了它,这个小改动非常有效。

在我的案例中,上述 none 解决方案有效。但是我注意到在 dist 文件夹中我的库的 package.json 中有一个新添加的脚本(可能是由于 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"
  }

所以这里要么 remove/replace prepublishOnly 脚本,要么使用 npm publish --ignore-scripts

发布

tsconfig.lib.json 中使用 ng build --prodenableIvy = false 构建我的库时,我将与 相同的“prepublishOnly”脚本添加到我的工作区 package.json ] 有。

原因似乎与在每个图书馆的 package.json 中通过 publishConfig/registry 使用私有存储库有关,如 https://github.com/angular/angular/issues/37973#issuecomment-656136865

中所述

在构建 Angular 库进行发布时,使用库 tsconfig.json 中的 ng build --prodenableIvy = false,如果使用私有存储库,npm publish --ignore-scripts

除了添加 --prod 标志外,如果您 运行 使用的是非常旧的版本,您还需要对 angular.json 进行以下更新:

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

该文件的内容是:

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

如果在angular.json中还有以下几行,您可以检查一下您是否使用的是这么旧的版本:

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

修复了 Angular 12+ 缺少组件样式的问题

在 Angular 12,同时使用:

ng build --configuration production

确实为我解决了原来的问题,它还引入了一个新问题:我的库组件的样式完全丢失了。

我已经通过替换解决了这个问题:

  "angularCompilerOptions": {
    "enableIvy": false
  }

与:

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

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

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

正在添加

“编译模式”:“部分”

“angularCompilerOptions”:{

}

解决了我的问题

在您的 angular.json 文件中,您的图书馆树中有一个 build 对象。在 build 中,你有一个 configurations 对象,它包含一个 production 对象,可能还有一个 development 对象。

build 对象中定义一个名为 defaultConfiguration 的新 属性,并设置值:productionproduction 属性 在 configurations 对象内。

您的 angular.json 文件应如下所示:

"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"
  },
  ...
}

您的 tsconfig.lib.prod.json 应该包含这个对象:

"angularCompilerOptions": {
  "enableIvy": false
}

终于可以执行了ng build your-library-name