title: How to share components between modules with lazy loading
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Do I really need to fully load the two modules? Or could I just load only the required component?</p>
  
  <p><strong>my loading lazy load:</strong></p>
  
  <pre><code>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]
    }
  ];
  </code></pre>
  
  <p>my component:</p>
  
  <pre><code>....
  
  &lt;div class="form-group"&gt;
      &lt;label for="exemplo"&gt;Create Name Product&lt;/label&gt;
      &lt;input type="text" name="name" [(ngModel)]="Product.name" #name="ngModel" &gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="exemplo"&gt;Create Brand&lt;/label&gt;
      &lt;brand-form-component&gt;&lt;/brand-form-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I created the shared module:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>And I imported in the other modules:</p>
  
  <p>Brand Module</p>
  
  <pre><code>import { SharedModule }from '../shared/shared.module';
  
  @NgModule({
    imports: [ SharedModule, DialogModule, GrowlModule, Ng2PaginationModule, BrandRouting ],
    declarations: [ BrandComponent, ListComponent ],
    providers:[ BrandService ]
  })
  export class BrandModule {}
  </code></pre>
  
  <p>product Module</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>But is giving the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/Rk0K0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Rk0K0.png" alt="enter image description here"></a></p>