After completing an upgrade on my Angular library project from version 11 to 13, I encountered an issue when attempting to execute the ng build command.
In version 11, the setup looked like this:
- I had multiple smaller modules, each containing various components and directives
- each module was made accessible through the
public-api.ts - the consumer interface could import each module as needed
Therefore, each module structure was quite straightforward:
@NgModule({
declarations: [AComponent],
imports: [],
exports: [AComponent],
})
export class AModule {}
@NgModule({
declarations: [BComponent],
imports: [],
exports: [BComponent],
})
export class BModule {}
And then exposed in public-api.ts:
export { AModule } from './lib/acomponent/a.module';
export { BModule } from './lib/bcomponent/b.module';
This system worked smoothly with Angular 11 using ngcc for library building. However, upon upgrading to Angular 13 (where libraries are compiled with Ivy partial compilation mode by default), issues arose with the aforementioned modules:
error Unsupported private class AComponent. This class is visible to consumers via AModule -> AComponent, but is not exported from the top-level library entry point.
error Unsupported private class BComponent. This class is visible to consumers via BModule -> BComponent, but is not exported from the top-level library entry point.
So how should modules be properly exposed in an Angular library?