How to share components between modules with lazy loading

Question

I'm loading my modules with lazy load. I'm in a situation where I need to use one form of a module in another module.

For example, there is the product module and the brand module. Both are loaded in lazy load. But I wanted to make it possible for the user to register the brands within the product form. But my question is that both modules are loaded lazily.

Do I really need to fully load the two modules? Or could I just load only the required component?

my loading lazy load:

const productRoutes: Routes = [
  {
    path: 'product',
    loadChildren: 'app/admin/product/product.module#ProductModule',
    canLoad: [AuthGuard]
  }
];

const brandRoutes: Routes = [
  {
    path: 'brand',
    loadChildren: 'app/admin/brand/brand.module#BrandModule',
    canLoad: [AuthGuard]
  }
];

my component:

....

<div class="form-group">
    <label for="exemplo">Create Name Product</label>
    <input type="text" name="name" [(ngModel)]="Product.name" #name="ngModel" >
</div>

<div class="form-group">
    <label for="exemplo">Create Brand</label>
    <brand-form-component></brand-form-component>
</div>

EDIT

I created the shared module:

import { NgModule }            from '@angular/core';

import { FormComponent as 
    FormBrandComponent }      from '../../brand/brand-form/form.component'

@NgModule({
  imports:      [  ],
  declarations: [ FormBrandComponent ],
  providers:    [ FormBrandComponent ],
  exports:      [ FormBrandComponent ],
})
export class SharedModule { }

And I imported in the other modules:

Brand Module

import { SharedModule }from '../shared/shared.module';

@NgModule({
  imports: [ SharedModule, DialogModule, GrowlModule, Ng2PaginationModule, BrandRouting ],
  declarations: [ BrandComponent, ListComponent ],
  providers:[ BrandService ]
})
export class BrandModule {}

product Module

import { SharedModule }from './shared/shared.module';


@NgModule({
  imports: [ SharedModule, CurrencyMaskModule, DragulaModule, GrowlModule, DialogModule, Ng2PaginationModule, productRouting, ReactiveFormsModule ],
  declarations: [ ProductComponent, FormComponent, ListComponent ],
  providers:[ FormComponent, ProductService, BreadService, MarcaService, GradeService ]
})
export class ProductModule { }

But is giving the following error:

Answer 1

The current implementation of lazy loading is on the module level, and it's all or nothing. If you need to share components between the two (which is what this sounds like), then it's possible you have a hidden shared module that you haven't yet completely identified. So, it's quite possible that you should be creating a new module to house those shared components/services and having that module be imported into the other two lazy loaded modules.

It is your choice whether that new module would be lazy or eagerly loaded - either would work. (Since it is a dependency of both the product and brand modules, once either is loaded, the new module would also get loaded).