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:

a few things: 1. your first shared module has FormBrandComponent as a provider - i assume that's a typo - FormBrandComponent should be in your declarables, not your providers. 2. in your shared module, you need to import whatever modules your shared module's components are using (for eg the FormsModule from @angular/forms, CommonModule etc. 3. A component should only be declared on a single module - you're declaring your FormComponent in two different modules - shared and product.... — snorkpete
my point about introducing the shared module was that you obviously have some code that's being used in both modules, so conceptually, there's some overlap in functionality between the two feature modules that you havent' explicitly recognised. So, i'm saying move that shared functionality completely to a new module and let the other two feature modules use the functionality from there. in other words, it's probably a good idea to let your folder structure also reflect that shared dependency rather than creating your shared module by referencing pieces of your brand module — snorkpete

snorkpete snorkpete · Accepted Answer · 2017-03-29T00:16:53

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).

How to share components between modules with lazy loading

1 Answers