After creating a sample Angular 6 Library using the Angular CLI, I have the basic structure with the library "my-lib" and the sample app "test-lib" for testing purposes.
Within the library, I am looking to implement dynamic imports. Specifically, I have a class that should be lazily imported:
export class Lazy {
print(): void {
console.log('I am lazy');
}
}
Additionally, in my consumer component:
export class MyLibComponent implements OnInit {
async ngOnInit() {
const lazyImport = await import(/* webpackChunkName: 'lazy' */ './lazy');
new lazyImport.Lazy().print();
}
}
To support dynamic imports, I've compiled the library to the dist folder using "ng build my-lib" and changed the tsconfig module to esnext.
When trying to include the library in the sample app generated by the CLI, I noticed that the "lazy chunk" was not being generated when building or serving the app. This raised questions about the possibility of using dynamic loading within a library itself.
Switching the import path inside the app.module.ts from the compiled dist folder to the source code of the library resulted in the creation of the lazy chunk as expected. However, this approach is not ideal as it requires importing directly from the typescript sources.
Edit: Summary of my problem
Can a library self-trigger dynamic loading, or is this feature limited to the main app for lazy-loading other parts of the app or additional libraries?
Edit: Reason for the question
My library comprises numerous generated typescript classes, with only a few needed per use case. The goal is to load these on demand.
Thank you for your assistance!
Stephan