Following the steps outlined in this helpful guide, I successfully created an Angular library and published it to our GitLab package registry.
Although I managed to install the package without any issues, I faced a challenge when trying to import the library modules. Upon inspecting the node_modules directory, I noticed that the module names appeared minified in some way.
/**
* 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 researching the issue, I came across a relevant discussion on ng-packagr's GitHub. Unfortunately, the issue seems to have been closed without a solution. Can anyone shed light on the root cause of this problem and provide guidance on how to properly configure my Angular library project?
I am currently using Angular 12, and below are the configuration details 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"]
}