14

我正在尝试在我的 angular npm 包中创建我认为称为辅助入口点的东西。我想要以下两个入口点

@scope/data-service
@scope/data-service/models

使用angular-cli生成基础包生成如下结构

scope
└───data-service
    │   karma.conf.js
    │   ng-package.json
    │   ng-package.prod.json
    │   package.json
    │   tsconfig.lib.json
    │   tsconfig.spec.json
    │   tslint.json
    │
    └───src
        │   public_api.ts
        │   test.ts
        │
        └───lib
                data-service.component.spec.ts
                data-service.component.ts
                data-service.module.ts
                data-service.service.spec.ts
                data-service.service.ts

根据 ng-packagr文档，您可以在名为 models 的数据服务下添加一个文件夹，然后在该文件夹中添加一个package.json文件夹，但 ng-packagr 似乎使用与 angular-cli 略有不同的结构。理想情况下，我正在尝试对类似于https://github.com/angular/angular/tree/master/packages/common的结构进行建模，但只要公众公开@scope/data-service，@scope/data-service/models我就会很高兴。

当我尝试创建类似于 ng-packager 推荐的结构时，我得到

error TS6059: File 'C:/projects/data-service-app/projects/scope/data-service/models/src/index.ts' is not under 'rootDir' 'C:\projects\data-service-app\projects\scope\data-service\src'. 'rootDir' is expected to contain all source files.

当我将模型目录移动到data-service\src目录中时，我的入口点是

@scope/data-service
@scope/data-service/src/models

如何摆脱辅助入口点上的 src？

使用 angular-cli 时创建具有辅助入口点的库的正确方法是什么？

4

3 回答 3

7

谢谢回复。这是我最终得到的解决方案，这一切都围绕着正确设置 index.ts 和 public_api.ts 文件

\---projects
    \---scope
        \---ngx-package
            |   karma.conf.js
            |   ng-package.json
            |   ng-package.prod.json
            |   package.json
            |   tsconfig.lib.json
            |   tsconfig.spec.json
            |   tslint.json
            |
            \---src
                |   public_api.ts
                |   test.ts
                |
                +---lib
                |       package-client-config.ts
                |       package-client.spec.ts
                |       package-client.ts
                |       package.module.ts
                |
                \---models
                    |   index.ts  (1)
                    |   package.json (2)
                    |   public_api.ts  (3)
                    |
                    \---src
                        |   public_api.ts  (4)
                        |
                        \---lib
                            |   model-a.ts
                            |   model-b.ts
                            |
                            \---hateoas
                                    hateoas.ts

好的，所以在上面的树中，注释里面带有数字的括号对应于下面的文件。

1）/projects/scope/ngx-package/src/models/index.ts

// export what ./public_api exports so we can reference models like
// import { modelA } from './models'
export * from './public_api';

2）/projects/scope/ngx-package/src/models/package.json

{
  "ngPackage": {}
}

3）/projects/scope/ngx-package/src/models/public_api.ts

export * from './src/public_api';

4) /projects/scope/ngx-package/src/models/src/public_api.ts

export * from './lib/model-a';
export * from './lib/model-b';
export * from './lib/hateoas/hateoas';

使用此设置，您只需在一个地方维护您的导出列表。我尝试了许多其他不起作用的变体，这似乎没有问题。

于 2018-09-28T15:57:29.027 回答
6

恐怕这对 ng-packagr 来说不是一件容易的事。

对于您尝试打​​包的每个“项目”，ng-packagr 会自动检测所有辅助包。

ng-packagr忽略 tsconfig.lib.json辅助包的文件，它将使用主包提供的 tsconfig 文件。

然后，在编译之前，它使用主节点的 tsconfig 为主节点和所有辅助节点加载一个 TS 程序。

这是通过这种方式完成的，因此打包程序可以解析代码并创建一个依赖树，它将告诉它首先呈现哪个包，第二个等等...... 是的，这也意味着 ng-packagr 不假定辅助包总是取决于主要的，它可能是另一种方式，它是有效的......

现在，到目前为止，一切都应该没问题，没有错误等......为所有包创建了一个 TS 程序，但没有发出任何东西，所以一切都很好。

您看到的错误出现在编译阶段，编译器尝试发出文件并抛出错误。这是 ng-packagr 记录“通过 ngc 编译 TypeScript 源”的时间

在这一点上，打字稿对引用根以外的文件不满意，就是这种情况。

一种解决方案是更新paths属性 intsconfig以指向已构建的每个包的输出目录。因此，如果包 A 刚刚编译，我们更改/创建paths指向输出库的记录，该输出库将不被视为 TS 源......因此没有错误。

这将起作用，我已经对其进行了测试，但遗憾的是它需要在ng-packagr源代码中进行一些工作，或者像我所做的那样，使用自定义的角度 devkit 构建器......

有了它，您可以paths在每次编译完成后替换它，因此下一次编译将引用构建的输出而不是源代码。

因为 ng-packagr 基于依赖图构建包，我们可以放心地假设这会起作用。

于 2018-09-28T03:32:34.640 回答
1

辅助入口点的示例文件夹布局

您所要做的就是创建一个package.json文件并将其放在您想要创建辅助入口点的位置。可以做到这一点的一种方法是模仿以下示例的文件夹结构，该示例除了其主入口点外还有一个测试入口点。

my_package
├── src
|   ├── public_api.ts
|   └── *.ts
├── ng-package.json
├── package.json
└── testing
    ├── src
    |   ├── public_api.ts
    |   └── *.ts
    └── package.json

的内容my_package/testing/package.json可以很简单：

{
  "ngPackage": {}
}

不，这不是错字。不需要姓名。不需要版本。这一切都由 ng-packagr 为您处理！构建时，主入口点由导入，import {..} from '@my/library'辅助入口点使用import {..} from '@my/library/testing'

来源 - https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md

于 2019-08-19T11:08:59.600 回答