Pfthb

I have a component CompA, which is used in 2 lazy-load modules, LazyModuleA and LazyModuleB. I know the way that creating a SharedModule and import it in both lazy-load modules works. But the SharedModule is not lazy-loaded and will be bundled in main.js.

Is there a way that make CompA lazy-loaded while can be shared between lazy-loaded modules?

I think you are confusing with shared module and lazy loading modules -

Lazy loading modules are called only on demand whereas shared module is totally different from it.

Let's come to shared module - In your App if you have around 3 modules and all the three modules relay on a same component directive or modules instead of importing all these in each and every modules you can just import in your shared module and map it in all your modules

AppModule(Root Module)

@NgModule(
 declarations: ,
 imports: [
 BrowserModule,
 HttpClientModule,
 FormsModule,
 ],
 providers: ,
 bootstrap: [AppComponent]
)
export class AppModule 

LazyModule

@NgModule(
 imports: [
 CommonModule,
 HttpClientModule,
 FormsModule,
 BoatsManagerRoutingModule,
 ],
 declarations: ,
 providers: 
)
export class LazyModule 

Check the above modules - you might see HttpClientModule and FormsModule are commonly imported in both the modules now the act of Shared module comes into play

SharedModule

 @NgModule(
 imports: [
 CommonModule,
 HttpClientModule,
 FormsModule,
 ],
 declarations: ,
 providers: ,
 exports: [
 HttpClientModule,
 FormsModule
 ]
 )
 export class SharedModule 

Now I Have imported those two modules in a Shared module and then exported the same, like the same way if you have any components or directives common to both can be declared in the shared module and export the same - Now only one thing you want to do is that directly import the Shared module you have created above in both the AppModule and LazyModule then you will have access to both HttpClientModule and FormsModule

So that is use of SharedModule there is no need of lazy loading the shared module because it will get imported to the modules and get access to them

Finally loading loading Lazy modules you can use loadChildern property on your routes that will load the module Lazily

 
 path: 'lazy',
 loadChildren: './folder/Lazy.module#LazyModule',
 

Hope this solves your problem - Happy coding !!