How to exchange components between modules with lazy loading

I am loading my modules with lazy loading. I am in a situation where I need to use one module form in another module.

For example, there is a product module and a brand module. Both are loaded into lazy load. But I wanted the user to be able to register brands in the product form. But my question is that both modules are lazy loaded.

Do I need to fully load two modules? Or can I just download only the required component?

my lazy load loading:

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)]="" #name="ngModel" >

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



I created a generic module:

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

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

  imports:      [  ],
  declarations: [ FormBrandComponent ],
  providers:    [ FormBrandComponent ],
  exports:      [ FormBrandComponent ],
export class SharedModule { }


And I imported into other modules:

Brand module

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

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


product module

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

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


But the following error occurs:

enter image description here


source to share

2 answers

The current implementation of lazy loading is at the module level, and it's all or nothing. If you need to exchange components between them (what and how it sounds), you may have a hidden shared module that you haven't fully identified yet. Thus, it is quite possible that you should create a new module to host these shared components / services and import that module into the other two loaded modules.

It's up to you whether this new module is lazy or loaded - or will work. (Since this is a dependency on both the product modules and the brand, once they are loaded, the new module will be loaded as well).



Please provide an example for a generic lazy loading component



All Articles