2

我正在开发一个应用程序和一堆要在应用程序中使用的库。所有这些最近都升级到了 Angular 9。这些库被配置为在没有 ivy 的情况下构建，应用程序被配置为使用 ivy 构建，这符合升级指南。我曾经遵循的本地开发过程如下 -

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

这一直有效到 Angular 8 及更低版本，但在 Angular 9 中，应用程序构建错误说： ERROR in Tried to overwrite path/node_modules/my-lib/lib/services/payment.service.d.ts.__ivy_ngcc_bak with an ngcc backup file ，这是不允许的。

所以，现在我必须另外做以下事情 -

  1. 停止应用程序构建。
  2. 从应用程序的 node_modules 中删除 lib，然后复制粘贴新的。
  3. 再次启动应用程序。

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

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

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

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

3 回答 3

0

我遇到了同样的问题。事实证明，postinstall: ngcc只有 Angular 9.0.0 版才需要您拥有的条目

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

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

于 2020-10-15T12:15:14.367 回答
0

这对我行得通

"configurations": {
    "production": {
        "tsConfig": "projects/mylib/tsconfig.lib.prod.json"
    }
}
于 2020-12-01T13:25:38.723 回答
0

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

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

完成此操作后，您可以在项目中使用该库：示例：

在你的 app.module.ts 中像这样导入库： import {yourLibraryModule} from 'yourLibrary';

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

于 2021-02-19T16:42:44.960 回答