angular library - 如何防止已发布的 npm 包导出缩小的组件和模块名称

Question

我已经按照此 guide here 创建了一个 angular 库，我已成功将其发布到我们的 gitlab 包注册表。

我可以毫无问题地安装包，但无法导入我的库模块。在 node_modules 中，我能够看到所有模块名称都被缩小了。

/**
 * Generated bundle index. Do not edit.
 */
export * from './index';
export { ScrapTypeTimeSeriesChartComponent as ɵf } from './lib/components/scrap-type-time-series-chart/scrap-type-time-series-chart.component';
export { ScrapTypeTimeSeriesChartModule as ɵe } from './lib/components/scrap-type-time-series-chart/scrap-type-time-series-chart.module';
export { ScrapTypeTimeSeriesChartService as ɵg } from './lib/components/scrap-type-time-series-chart/scrap-type-time-series-chart.service';
export { WorkplaceActiveStatusWidgetComponent as ɵb } from './lib/components/workplace-active-status-widget/workplace-active-status-widget.component';
export { WorkplaceActiveStatusWidgetModule as ɵa } from './lib/components/workplace-active-status-widget/workplace-active-status-widget.module';
export { DatePipe as ɵd } from './lib/shared/pipes/date.pipe';
export { TimerPipe as ɵc } from './lib/shared/pipes/timer.pipe';

//# sourceMappingURL=company-core-ui.d.ts.map

经过一些研究，我发现 issue on the ng-packagr 最后一条评论提出了同样的问题，但问题已关闭。有谁知道问题出在哪里以及如何正确配置我的 angular 库项目？

我用的是angular12。以下是库项目的配置。

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "rootDir": ".",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "module": "esnext",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2020", "dom"],
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "baseUrl": ".",
        "paths": {
            "@company/core-ui": ["dist/core-ui", "libs/core-ui/src/index"],
            "@company/core-ui/*": ["libs/core-ui", "libs/core-ui/*"]
        }
    },
    "exclude": ["node_modules", "tmp"]
}

tsconfig.lib.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "../../dist/out-tsc",
        "target": "es2015",
        "declaration": true,
        "inlineSources": true,
        "types": [],
        "lib": ["dom", "es2018"]
    },
    "angularCompilerOptions": {
        "skipTemplateCodegen": true,
        "strictMetadataEmit": true,
        "enableResourceInlining": true,
        "enableIvy": false
    },
    "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.stories.ts", "**/*.stories.js"],
    "include": ["**/*.ts"]
}

Answer 1

解决方案是显式导出令牌以避免丑化。所以在最外面的桶里我必须

export { ScrapTypeTimeSeriesChartComponent } from './lib/components/scrap-type-time-series-chart/scrap-type-time-series-chart.component';
...

angular library - 如何防止已发布的 npm 包导出缩小的组件和模块名称

angular library - how to prevent published npm package to export minified component and module names

npm

typescript

angular

angular-library

ng-packagr