【问题标题】:Angular Library with proper sub-entries具有适当子条目的 Angular 库
【发布时间】:2025-12-19 12:35:15
【问题描述】:

我正在尝试按照文档构建一个 Angular 库,但不幸的是我在构建它时遇到了一些问题。

我面临两个主要问题:

第一个问题:库的模块以完整路径导出

import MyComponentModule from '@my/components/lib/my-component/my-component.module

应该是这样的

import MyComponentModule from '@my/components/my-component

第二个问题:我无法编译正在使用该库的应用程序

我收到一个编译错误,提示 @my/components/lib/my-component/my-component.module 无法解析,即使我在 node_modules 中看到它。

我做错了什么? :(

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "paths": {
      "@my/components/*": [
        "projects/components/src/*",
        "projects/components/src"
      ],
      "@my/components": [
        "dist/components/*",
        "dist/components"
      ]
    },
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
// projects/components/package.json
{
  "name": "@my/components",
  "version": "1.0.0",
  "peerDependencies": {
    "@angular/common": "11",
    "@angular/core": "11"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

// projects/components/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/components",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}
// projects/components/src/public-api.ts
export * from './lib/my-component';

// projects/components/src/lib/my-component/index.ts
export * from './public-api'

// projects/components/src/lib/my-component/public-api.ts
export * from './my-component.module';
export * from './my-component.component';

// projects/components/src/lib/my-component/package.json
{
  "ngPackage": {
    "lib": {
      "entryFile": "public-api.ts",
      "cssUrl": "inline"
    }
  }
}

然而,在使用 CLI 构建库时,我发现它构建了两件事:

  • @my/components,和
  • @my/components/src/lib/my-component // 这不应该是@my/components/my-component吗?

谁能告诉我这里缺少什么?

【问题讨论】:

  • 第二条消息似乎来自第一条消息。
  • documentation 的这一部分可能会有所帮助。代码中的export 语句使用相对路径,.表示法,当使用 @ 的路径在其他地方使用时。
  • 我认为你的第一个和第二个问题是相关的。您很可能是从源代码导入库而不是构建。请检查您是否正在导入构建生成的库。

标签: angular typescript angular-library ng-packagr


【解决方案1】:
  1. 由于您使用 *,它会按原样导出所有内容,因此您可以指定文件。
"paths": {
      "@my/components/my-component": [
        "projects/components/src/lib/my-component/public-api.ts",
      ],
    },
  1. 由于 * 没有默认值,因此您必须在它周围使用方括号,以便它可以找到参考。
import { MyComponentModule } from '@my/components/my-component';

【讨论】:

    最近更新 更多