angular-cli 库创建辅助入口点 [英] angular-cli library create secondary entry point

问题描述

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

@scope/data-service@范围/数据服务/模型

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

范围└───数据服务│ 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数据服务.component.spec.ts数据服务.component.ts数据服务.module.ts数据服务.service.spec.ts数据服务.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: 文件 'C:/projects/data-service-app/projects/scope/data-service/models/src/index.ts' 不在 'rootDir' 'C:\projects\数据服务应用程序\项目\范围\数据服务\src'.'rootDir' 应该包含所有源文件.

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

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

如何去除辅助入口点上的 src?

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

解决方案

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

\---projects\ - -范围\---ngx-包|业力配置文件|ng-package.json|ng-package.prod.json|包.json|tsconfig.lib.json|tsconfig.spec.json|tslint.json|\---src|public_api.ts|测试文件|+---库|包-客户端-config.ts|包-client.spec.ts|包-client.ts|包.module.ts|\ - -楷模|index.ts (1)|package.json (2)|public_api.ts (3)|\---src|public_api.ts (4)|\---lib|模型-a.ts|模型-b.ts|\---仇恨hatoas.ts

好的，所以在上面的树中注意里面有数字的括号，它们对应于下面的文件.

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

//导出 ./public_api 导出的内容，以便我们可以引用模型，例如//从 './models' 导入 { modelA }从'./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';从'./lib/model-b'导出*；从'./lib/hateoas/hateoas'导出*；

通过此设置，您只需在一处维护导出列表.我尝试了许多其他变体，但都不起作用，这似乎没有问题.

I am trying to create what I believe is called a secondary entry point into my angular npm package. I want the following two entry points

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

Using the angular-cli to generate the base package generates the following structure

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

Based on 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 but as long as the public exposed is @scope/data-service and @scope/data-service/models I would be happy.

When I try to create the structure similar to ng-packager recommendation I get

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.

When I move the models directory into the data-service\src directory my entrypoints are

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

How do I get rid of the src on my secondary entry point?

What is the correct approach for creating a library with a secondary entry point when using the angular-cli?

解决方案

Thanks for the reply. Here is the solution I ended up with, it all revolved around setting up the index.ts and public_api.ts files correctly

\---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

Ok so in the tree above notes the parens with numbers inside they correspond to the files below.

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';

With this setup you only need to maintain your list of exports in one place. I tried a lot of other variations that didn't work this seemed to work without problem.

这篇关于angular-cli 库创建辅助入口点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！