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: