angular-cli 库创建辅助入口点

Question

我正在尝试在我的 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 you would add a folder under data-service called models then add a second package.json to that folder but ng-packagr seems to use a slightly different structure than the angular-cli. Ideally I am trying to model the structure similar to https://github.com/angular/angular/tree/master/packages/common 但只要暴露的 public 是 @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 时，创建具有辅助入口点的库的正确方法是什么？

Answer 1

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

对于您尝试打包的每个 "project"，ng-packagr 会自动检测所有二级包。

ng-packagr 忽略 tsconfig.lib.json次级包的文件，它将使用初级包提供的tsconfig文件。

然后在编译之前使用主要的 tsconfig 为主要和所有次要加载 TS 程序。

This is done this way so the packager can then parse the code and create a dependency tree, which will tell it which package to render first, 2nd etc... YES, it also means that ng-packagr DOES NOT assume that a secondary package always depends on the primary, it might be the other way and it's valid...

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

您看到的错误出现在编译阶段，编译器在该阶段尝试发出文件并抛出错误。这是 ng-packagr 记录 "Compiling TypeScript sources through ngc"

的时候

在这一点上，typescript 不满意对根目录之外的文件的引用，就是这种情况。

一个解决方案是更新 tsconfig 中的 paths 属性以指向构建的每个包的输出目录。因此，如果包 A 刚刚编译，我们 change/create paths 记录指向输出库，它不会被视为 TS 源...因此没有错误。

这会起作用，我已经测试过了，但遗憾的是，它需要在 ng-packagr 源代码中做一些工作，或者像我一样，使用自定义 angular devkit 构建器...

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

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

Answer 2

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

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

Answer 3

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

angular-cli 库创建辅助入口点

angular-cli library create secondary entry point

angular-cli

angular

angular-library

ng-packagr