使用链接库时，Angular 9应用程序构建失败

问题描述

我正在开发一个应用程序和一堆要在该应用程序中使用的库。所有组件最近都已升级到Angular9。按照升级指南，将库配置为不使用ivy进行构建，而将应用程序配置为使用ivy进行构建。我过去遵循的本地开发流程如下-

使用--watch构建库和应用程序。
在库中进行更改。库构建成功后，复制dist / my-lib并将其粘贴到应用程序的node_modules文件夹中（这将触发应用程序构建）。

直到Angular 8及更低版本都可以使用，但是使用Angular 9时，应用程序生成错误并指出： 尝试中的错误，试图使用ngcc备份文件覆盖path / node_modules / my-lib / lib / services / payment.service.d.ts .__ ivy_ngcc_bak。

所以，现在我必须另外执行以下操作-

停止应用程序的构建。
从应用程序的node_modules中删除该库，然后复制粘贴新库。
再次启动应用程序。

Angular文档说要使用npm链接 https://angular.io/guide/creating-libraries#linked-libraries。但是我无法理解：

库的package.json配置指向正确的入口点。例如，main应该指向一个JavaScript文件，而不是TypeScript文件。

我尝试了npm链接，但这不会触发应用程序构建，并且我的更改未得到反映。我想知道如何解决npm链接问题，或者是否有更好的方法将libs和应用程序一起使用。

我的库的package.json看起来像这样（由于我正在处理客户端应用程序，因此我只发布了package.json结构）：

{
  "name": "my-lib","version": "1.2.0","description": "description","repository": {
    "url": "http://private-nexus-url"
  },"scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","build-ci": "npm run test-headless && npm run sonar && npm run publish","test-headless": "ng test --watch=false --browsers=ChromeHeadlessNoSandBox --code-coverage","sonar": "sonar-scanner","test": "ng test --code-coverage","lint": "ng lint","e2e": "ng e2e","build-lib": "ng build --prod my-lib","publish": "npm run build-lib && cd dist/my-lib && npm publish","postinstall": "ngcc"
  },"dependencies": {
    "@angular/animations": "^9.1.6","@angular/common": "^9.1.6","@angular/compiler": "^9.1.6","@angular/core": "^9.1.6","@angular/forms": "^9.1.6","@angular/platform-browser": "^9.1.6","@angular/platform-browser-dynamic": "^9.1.6","@angular/router": "^9.1.6",...
  },"devDependencies": {
    "@angular-devkit/build-angular": "^0.901.5","@angular-devkit/build-ng-packagr": "~0.901.5","@angular/cli": "~9.1.5","@angular/compiler-cli": "~9.1.6","@angular/language-service": "~9.1.6","husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },"lint-staged": {
    "*.ts": [
      "prettier --write","git add"
    ]
  }
}

解决方法

我有完全相同的问题。原来，只有Angular版本9.0.0才需要您拥有的postinstall: ngcc条目

我正在运行9.1.10，删除postinstall: ngcc条目对我来说解决了这个问题。

此外，由于我们要集成另一个构建系统，因此我选择了重新设计库。我真的不喜欢链接库。是的，您可以避免在与主应用程序并行开发库时遇到的任何校验和问题（如果将库作为依赖项包含在package.json中）。我最好的长期解决方案是建立一个单独的库，以供应用程序使用可交付的商品/工件，并具有package.json和相应的package-lock.json条目。

对我有用的

"configurations": {
    "production": {
        "tsConfig": "projects/mylib/tsconfig.lib.prod.json"
    }
}

要将本地库用于另一个 angular 项目，您可以这样做：

创建库后，您可以在那里构建：ng build yourLibrary
转到 dist 文件夹：./dist/yourlibrary/
用 npm 链接它们：npm link npm link 在 npm 本地包中创建一个 similik
转到您的应用程序的主页并链接您的应用程序的库：npm link yourLibrary

完成后，您可以在项目中使用该库：例子：

在你的 app.module.ts 像这样导入库：从'yourLibrary'导入{yourLibraryModule}；

他们像使用另一个节点模块一样使用您的库。并启动您的应用程序对我来说没问题。

angular angular-ivy npm-link