如何更改 Angular 10 库构建结构

Question

我正在维护一个 Angular 10 Ivy 库，我正在尝试升级它以使用辅助入口点，但我运行遇到了最终文件夹结构的问题建造。

理想情况下，文件夹结构将模仿@angular的文件夹结构：

-node_modules
 |
  -- @angular
     |
     --core
     --common
     --cli
     --material
     ...

我可以像这样导入库的片段：import { someModule } from '@angular/core';

我当前的库构建的文件夹结构为

-node_modules
 |
  --myLibrary
    |
     --package.json
     --dist/myLibrary
       |
        --package.json
        --public_api.ts
        --myLibrary.d.ts
        --feature1
        --feature2
        --feature3
        ...

这迫使我导入 import { feature1Module} from 'myLibrary/dist/myLibrary/feature1';.

等功能

我知道我可以通过更新 myLibrary/ng-package.json 中的 dest 路径来删除第二个 myLibrary 文件夹，但我不知道如何删除 dist 文件夹使所有内容都构建在同一级别，因为设置 "dest": "../.." 将无法构建。

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/myLibrary",
  "assets": [
    "quill/*.scss"
  ]
}

感谢任何帮助。

更新： 项目结构为

-projects
 |
  --myLibrary
    |
     --package.json
     --ng-package.json
     --src
       |
        --public_api.ts
        --commonFunctions
     --feature1
       |
       --package.json
       --src
         |
         --public_api.ts
         --index.ts
         --feature1.component.ts
         --feature1.component.html
         --feature1.module.ts
     --feature2
     --feature3
     ...

我的 projects/myLibrary/src/public_api.ts 仅导出 commonFunctions 中的功能，每个功能文件夹中的每个 public_api.ts 文件仅导出其各自功能的模块和组件。

Answer 1

我有类似的文件夹结构，在我的库中有 Input、Button 等，这就是您所说的功能。在 ng-package.json 中，我有如下设置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ngx-pluto",
  "lib": {
    "entryFile": "src/index.ts",
    "cssUrl": "inline"
  }
}

在我的功能 table.module.ts 中，我可以导入 NpPaginatorModule 功能，如下所示：

import { NpPaginatorModule } from '../paginator/index';

在我使用 npm 发布我的库后，我可以在我的消费项目中导入我的功能，如下所示：

import { NpButtonModule } from 'ngx-pluto';

这是我的代码 link 仅供您参考： https://github.com/KevinZhang19870314/pluto-ui

Answer 2

我找到了问题的答案。

我的问题是我将我的库作为 github 依赖项而不是 npm 包导入到我的项目中。我这样做是因为 Github 允许用户免费托管私有存储库，但 NPM 需要按月付费订阅私有包，因此我们公司的解决方法是添加私有库的依赖项，例如 "my-library": "git+ssh://git@github.com/myOrg/my-library.git#semver:10.2.7"。当您没有实施次要入口点时，这实际上是有效的，因为您的主要入口点指向一个定义文件，该文件使用所有库功能构建并且具有这些功能的正确路标。

当您尝试实现辅助入口点时，构建模块的结构会成为一个问题，因为 ng-packagr 在搜索额外的 package.json 文件时不会遍历模块结构中的单层表示辅助入口点。在阅读 https://github.com/npm/npm/issues/2974 后，似乎 npm 不支持从子目录安装项目，而是只查找它在存储库中找到的第一个 package.json 文件并将其作为模块安装。这就是给我奇怪的文件夹结构的原因，因为存储库实际上是一个承载 my-library、演示项目和 e2e 测试项目的单一存储库。由于没有支持的方法来单独安装其中一个项目，我可能的解决方案仅限于将库分解成它自己的 Github 存储库或编写一个 postinstall 脚本 copy/paste node_modules/myLibrary/dist/myLibrary的内容变成node_modules/myLibrary

如何更改 Angular 10 库构建结构

How to change Angular 10 library build structure

angular

directory-structure

angular10

angular-library