【发布时间】: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