Challenge:
I recently developed a customized UI library using ng-packagr, where I exported unique components along with some model classes.
Issue:
While the import statement functions correctly for the exported components in my main project, it fails to work for the exported classes. This results in a compilation error by webpack stating:
Error: module not found - unable to resolve
my-custom-library/models
Details of Library Project:
Model class location: src/app/modules/my-custom-module/models/my-model.ts
export class MyModel {
constructor() {
// default property values here
}
// ...properties here
}
Index file location: src/app/modules/my-custom-module/models/index.ts
export * from './my-model';
export * from './my-other-model';
Export file at root: models.ts
export * from './src/app/modules/my-custom-module/models/index';
ng-packagr file at root: public_api.ts
export * from './models';
export * from './src/app/modules/my-custom-module/my-custom-module.module';
export * from './src/app/modules/my-custom-module/components/index';
Main Project Details:
import {MyCustomModule} from 'my-custom-library'; // works
import {MyModel} from 'my-custom-library'; // works
import {MyModel} from 'my-custom-library/models'; // does not work
Purpose Behind This Setup: The aim is to streamline and segment the API of the UI library to enhance usability for end developers.
I suspect that there could be an issue related to mapping webpack module resolution, as VS Code recognizes the import statements, provides intellisense support, and allows navigation via Ctrl + Click to the correct file. However, during compilation, webpack encounters errors.