Angular 编译器选项路径配置

Posted 2023-02-16

【中文标题】Angular 编译器选项路径配置

【英文标题】：Angular Compiler Options path configuration

【发布时间】：2020-05-06 14:42:28

【问题描述】：

我正在构建一个角度库（通过 cli 生成）。 多个入口点的结构如下所示

-projects
 -my-lib
  -src
   -lib
    -components-type-x
     -component-1
      -index.ts
      -public-api.ts
      -...
    -pubic-api.ts
   -ng-package.json
   -package.json
   -tsconfig.lib.json
   -tsconfig.lib.prod.json

Rest 就像普通的 Angular 项目。 我遇到的问题是配置编译器选项使用的路径。

我在尝试构建库时得到了什么

Building entry point '@xx/my-lib'
Building entry point '@xx/my-lib/src/lib/components-x/component-1'

我想看到的是

Building entry point '@xx/my-lib'
Building entry point '@xx/my-lib/components-x/component-1'

已尝试更改 src 项目的 tsconfig.json 上的路径，但也尝试更改 tsconfig.lib.json 上的路径，但没有。

"paths": 
  "@xx/my-lib": ["projects/my-lib/src/lib/public-api.ts"],
  "@xx/my-lib/*": ["projects/my-lib/src/lib/*/public-api.ts"]


"paths": 
  "@xx/my-lib": ["dist/my-lib"],
  "@xx/my-lib/*": ["dist/my-lib/*"]

我在这里错过了什么？

【参考方案1】：

您可以添加一个额外的路径，该路径指向 src/lib 文件夹。并在每个组件文件夹中创建一个 index.ts，它会从 public-api.ts 导出所有内容。

tsconfig.json：

"paths": 
  "@xx/my-lib": ["projects/my-lib/src/lib/public-api.ts"],
  "@xx/my-lib/*": ["projects/my-lib/src/lib/*"]

components-1/index.ts:

export * from './public-api';

components-1/public-api.ts：

export * from './test.module';
export * from './test.component';

导入组件现在应该如下所示：

import  Component1 from '@xx/my-lib/components-x/component-1'

目录结构：

- projects
 - my-lib
  - src
   - lib
    - components-x
     - components-1
      - index.ts
      - public-api.ts
      - ... component files

这是一个示例存储库的链接

https://github.com/hildegunstvonmythenmetz/ts-library-imports

请看一下app模块中组件模块的导入。

【讨论】：

你能告诉我 lib 结构的外观吗？因为我想我已经按照你说的做了，但只是为了确定，因为它似乎并没有改变什么。

您好，我创建了一个存储库来说明如何解决此问题。请看：github.com/hildegunstvonmythenmetz/ts-library-imports

如果您的问题已解决，请告诉我，如果解决了，请将此标记为正确答案。