6

我有两个角度库 NPM 包：

  • A有基本组成部分
  • A-BC具有基于A中的组件构建的组件，并具有与BC库集成的附加功能

A-BC导入中的A一些组件import { MyThing } from 'A';

A-BC的 package.json 是：

"peerDependencies": {
   "A": 1.0.0,
   "BC": 4.0.0
},
"devDependencies": {
   "A": 1.0.0,
   "BC": 4.0.0
}

我尝试的开发步骤是：

  1. npm link --only=production在（的内置版本）A
  2. npm link --only=production在（的内置版本）A-BC
  3. 在my-app，运行npm link A
  4. 在my-app，运行npm link A-BC
  5. 跑my-app

找不到安装在任何地方时编译my-app失败。它们都以符号链接文件夹的形式正确列在彼此旁边。我已经在and中启用了这个，但这没有帮助。A-BCAnode_modulespreserveSymlinkstsconfig.jsonangular.json

A可能是 的直接依赖项A-BC，但是：

  • 两者都有一个调用A，该调用对于安装它的应用程序正常运行所需的包。我不知道如何将参数动态地从A-BCforRoot()forRoot()A-BC forRoot()A forRoot()
  • my-app需要使用来自AAND 的组件的组件A-BC。
  • 如果A是直接依赖项，我不知道如何在A-BC本地进行开发——这可能涉及同时更改A-BC和偶尔更改A.

目前我的创可贴解决方案是：

  1. 发布A为测试版
  2. A-BC在和中安装测试版my-app
  3. 链接A-BC到my-app通过npm link
  4. A如果需要进行更改，则发布新的测试版，my-app然后A-BC反复安装

通过 NPM 对本地文件的支持进行安装可能有另一种工作流程A，但我不确定。

4

2 回答 2

3

我假设您正在谈论的这两个包是使用 ngCli v6 创建的，或者您正在从现有的 ng 工作区合并它们，无论哪种方式让我们尝试解决您的问题。

我将假设您具有如下 ng 工作区结构

...
projects >
  A
  B
  host
...

其中 A 是一个库 B 是一个依赖于 A 的库，主机是一个使用 B 的应用程序。

在您的 ng 工作区中本地工作/开发 ng 包时，您应该将它们的别名添加到您的root tsconfig.json文件中，例如：

{
 ...
"compilerOptions": {
    ...
    "paths": {
      "a": [
        "dist/a"
      ],
      "a/*": [
        "dist/a/*"
      ],
      "b": [
        "dist/b"
      ],
      "b/*": [
        "dist/b/*"
      ]
    }
  }
}

当使用命令生成库时，这会在 CLI v7 中自动为您完成ng new lib {yourLibName}。

在确保您具有此配置后，我建议您添加一些脚本package.json，以便以更直接的方式构建您的库并为您的开发应用程序提供服务（host在示例的情况下）

"build:a": "ng build A --watch=true",
"build:b": "ng build B --watch=true",
"serve:host": "ng serve host"

之后，依次运行这三个脚本，并在 your 中导入相应libModules的 from和从inside中导入相应的，您将能够使用 的组件，这些组件依赖于.lib BHost ApplibModuleslib ALib Blib Blib AHost APP

请记住，您不能在工作区中安装这两个库，因为这会破坏项目中的导入，而且这些库也不应该是工作区的一部分package.json。

如果您已经完成了上述步骤，但您的问题仍未解决，请向我们提供 git repo 的链接，或分享您的tsconfig.json, package.json,angular.json文件，以便我们继续调查。

回复子评论

因此，如果我得到您的情况，您希望能够开发这些packages 并将它们安装在一个单独的 ng 工作区中。

如果是这种情况，据我所知，没有直接的方法可以做到这一点，也许您可​​以通过调整tsconfig.json文件来实现这种行为（正如您在评论中所建议的那样）。

但在我看来，如果你想ng packages在同一个工作空间内使用它，你不一定需要推动它们，因为归根结底，它们只是另一组ngModules将成为“一等公民”的人。您引用它们的应用程序。因此，在为生产而构建时，它们将被摇树、最小化优化等等。在这种情况下，你应该只扩展你的部署脚本package.json，这样，在你开始构建主应用程序之前，这将依赖于那些npm/ng/packages，你构建那些包。

"deploy": "ng build A && ng build B && ng build MainApp --production"

同时，它们npm/ng/packages仍然是npm可发布的，您将能够在其他工作区中使用它们。 请记住，它们不应该是相同（正在开发它们的工作空间）工作空间package.json依赖项的一部分。

于 2019-07-14T13:40:09.050 回答
0

我最初尝试做的事情有很多问题，因为场景一开始就是错误的。

我在这里学到的主要两件事是：

  1. 仅在内部 Angular 项目中使用的包不应发布到 npm
  2. 如果库相互依赖，它们应该直接从你的 typescript/angular 源导入

如果你试图让我描述的场景发挥作用，它会让你头疼不已，因为它是一种从根本上被破坏的方法。

现在所有共享这些库的相关项目都在一个nx monorepo中。直接导入库后，一切都可以通过实时重新加载、摇树等自动运行，正如此处的其他答案/评论所建议的那样。迁移并不麻烦，monorepo 设置的工具非常好。

当设置你的 monorepo 以使这个场景工作时，这些库将通过 tsconfig 路径导入到每个项目中，如下所示。这使得 npm 包的旧导入语句能够保持不变，因为您的路径可以只引用前一个 npm 包的名称（如上述问题中的 A 或 A-BC）。

现在，每个项目也共享相同的包 json，并且通过将这些工具脚本集中在 monorepo 根目录中，用于服务、构建等的 npm 脚本得到了极大的改进，而不是在每个 repo 中单独使用工具。

@angular/*修复库冲突的一些问题的路径。

/apps/example-project/tsconfig.json 中的示例路径

   "paths": {
      "@angular/*": ["../node_modules/@angular/*"],
      "@exampleNPMOrg/A": [
        "../../libs/A/src/index"
      ],
      "@exampleNPMOrg/A-BC": [
        "../../libs/A-BC/src/index"
      ],
    }

/tsconfig.json 中的示例路径

   "paths": {
      "@exampleNPMOrg/A": [
        "libs/A/src/index"
      ],
      "@exampleNPMOrg/A-BC": [
        "libs/A-BC/src/index"
      ],
    }
于 2020-01-15T19:02:04.817 回答