使用angular-cli创建次要入口点的库

Question

使用angular-cli创建次要入口点的库

angularangular-cliangular-libraryng-packagr

18

我正在尝试创建一个我认为被称为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的documentation，您需要在data-service下添加一个名为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.

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

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

我该如何去掉次要入口点上的src？

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

- JoAMoS

这是我遇到的问题最相近的讨论，但我似乎仍然找不到解决方案 https://github.com/dherges/ng-packagr/issues/900 - JoAMoS

3个回答

6

很抱歉，使用ng-packagr进行此操作并不容易。对于每个要打包的“项目”，ng-packagr会自动检测所有辅助包。ng-packagr会忽略辅助包的tsconfig.lib.json文件，而是使用主要包提供的tsconfig文件。然后，它会为主要和所有辅助包加载一个TS程序，在编译之前使用主要的tsconfig。这样做是为了让打包工具能够解析代码并创建依赖树，告诉它要先渲染哪个包，其次是第二个等等... 是的，这也意味着ng-packagr不会假设辅助包总是依赖于主要包，可能是反过来，这是有效的...

现在，到这里为止一切都应该没问题，没有错误等... 为所有包创建了一个TS程序，但没有发出任何东西，所以一切顺利。你看到的错误出现在编译阶段，在那里编译器尝试发出文件并抛出错误。这是当ng-packagr记录“通过ngc编译TypeScript源”的时候。此时，typescript对根目录之外的文件引用感到不满，情况就是这样。解决方法之一是更新tsconfig中的路径属性，将其指向已构建的每个包的输出目录。因此，如果仅编译了包A，则更改/创建指向输出库的路径记录，该库不会被视为TS源代码...因此没有错误。这将奏效，我已经测试过了，但不幸的是它需要一些工作，要么在ng-packagr源代码中，要么像我一样，使用自定义的angular devkit builder...使用它，您可以在每次编译完成后替换路径，因此下一次编译将引用已构建的输出而不是源代码。由于ng-packagr基于依赖图构建软件包，因此我们可以安全地假设这将起作用。

- Shlomi Assaf

2

Example Folder Layout for Secondary Entrypoints

All you have to do is create a package.json file and put it where you want a secondary entry point to be created. One way this can be done is by mimicking the folder structure of the following example which has a testing entry point in addition to its main entry point.
my_package
├── src
|   ├── public_api.ts
|   └── *.ts
├── ng-package.json
├── package.json
└── testing
    ├── src
    |   ├── public_api.ts
    |   └── *.ts
    └── package.json
The contents of my_package/testing/package.json can be as simple as:
{
  "ngPackage": {}
}
No, that is not a typo. No name is required. No version is required. It's all handled for you by ng-packagr! When built, the primary entry point is imported by import {..} from '@my/library' and the secondary entry point with import {..} from '@my/library/testing'

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

- progm

1

我曾经尝试过类似的东西，但没有必要回去重构。现在我正在处理这个库，也许我会快速测试一下并告诉你结果。 - JoAMoS

4

这个结构会导致错误，提示所有源文件必须在“rootDir”内。 - Ross Brasseaux

我遇到了代码覆盖率报告的问题。尽管运行了所有测试，但它仅报告主要端点的内容。 - Victor Zakharov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JoAMoS · Accepted Answer

感谢回复。这是我最终得出的解决方案，它都围绕着正确设置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';

通过这个设置，你只需要在一个地方维护你的出口清单。我尝试了很多其他的变化，但是这个似乎没有问题。