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

Question

我正在开发一个应用程序和一堆要在该应用程序中使用的库。所有最近都升级到 Angular 9. 库配置为不使用 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 link https://angular.io/guide/creating-libraries#linked-libraries。但我无法理解 :

的含义

the library's package.json configuration points at the correct entry points. For example, main should point at a JavaScript file, not a TypeScript file.

我试过 npm link 但这并没有触发应用程序构建，我的更改也没有反映出来。我想知道如何解决 npm link 问题，或者是否有更好的方法将库和应用程序一起使用。

我的库的 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"
    ]
  }
}

Answer 1

我遇到了完全相同的问题。事实证明，只有 Angular 版本 9.0.0

才需要你的 postinstall: ngcc 条目

我是运行 9.1.10，删除 postinstall: ngcc 条目解决了我的问题。

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

Answer 2

适合我

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

Answer 3

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

创建你的库后，你可以在那里构建：ng build yourLibrary
转到 dist 文件夹：./dist/yourlibrary/
Link 他们 whits npm : npm link npm link 在 npm 本地包中创建一个 similik
转到您的应用程序主页和 link 您的应用程序所在的库：npm link yourLibrary

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

in your app.module.ts import the library like this : import {yourLibraryModule} from 'yourLibrary';

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

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

Angular 9 application build fails when working with linked libraries

angular

angular-ivy

npm-link