Search code examples
angulartypescriptnpmangular-libraryng-packagr

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


I've followed this guide here to create an angular library, which I've successfully published to our gitlab package registry.

I was able to install the package without any problems, but I wasn't able to import my library modules. In the node_modules I was able to see that all the module names were sort of minified.

/**
 * 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

After a bit of research, I've found an issue on the ng-packagr where the last comment was asking the same, but the issue got closed. Does anyone else knows where the problem is and how I can configure my angular library project correctly?

I've using angular 12. Below are the configs of the library project.

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"]
}

Solution

  • The solution was to explicitly export the Tokens to avoid uglification. So in the outer most barrel I have to

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