How to inherit a module from another module in Angular2?

Question

So I'm using Angular 2 final (2.0.0) and let's say i create a WidgetsModule with a bunch of directives and components that will help me build my application, and then import it in my AppModule

import { NgModule }      from '@angular/core';
import { UniversalModule } from 'angular2-universal';

import { WidgetsModule } from '../../../widgets';
import { App, appRouting } from './';

@NgModule({
  imports:      [
    UniversalModule,
    WidgetsModule,
    appRouting
  ],
  providers:    [ AppPresenter ],
  declarations: [ App ],
  exports:      [ ],
  bootstrap:    [ App ]
})
export class AppModule { }

Then i want to use widgets in the child modules, like HomeModule, CartModule, etc. How can I make the widgets available without having to import the WidgetsModule in every other Module?

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

import { WidgetsModule } from '../../../widgets';
import { Cart, cartRouting } from './';

@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    WidgetsModule,  //<-- I want to avoid doing this in every module
    cartRouting
  ],
  providers:    [ ],
  declarations: [ Cart ]

})
export class CartModule { }

Is there a way to do it like it's done with the directives in the exports[]?

Serranid

Answer 1

It directly needs access to its own WidgetsModule just like it need direct access to it's own FormsModule (one way or another). One way to clean it up though is to export all the modules that are used in multiple places, from a SharedModule. Then you can just import the SharedModule everywhere

@NgModule({
  exports: [
    FormsModule,
    CommonModule,
    WidgetsModule
  ]
})
class SharedModule {}

You don't need to imports any of them into the SharedModule unless say you are declaring a component in the SharedModule that uses any of those other modules.

Then in all your other modules, just imports the SharedModule. This ends up cleaning it up a lot, and you only need to maintain one shared module.

See Also:

• Angular2 How to clean up the AppModule

Benefic

Thanks. I see it now. You really have to import the modules in every module, there is no "reuse" of the instances. No problem, though. This SharedModule is useful! Thank you! – Serranid

Oh, men. I used in Angular 8 and works as a charm. Thanks. – Insolence

Answer 2

Modules do not inherit access to the components, directives or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.

source: ngmodule

Hoy

Answer 3

I think it's actually not need because WidgetsModule is same as FormsModule (@angular/forms). WidgetsModule is user-defined module and FormsModule provided by angular. That's the only difference. Both of this module are used for doing some functionality.

So just think about how we can declare FormsModule once and use it in all other module, if you understood that then the problem is solved.

Just vist the following link One single NgModule versus multiples ones with Angular 2

Leak

I don't understand.. you're talking about joining my modules into one, in order to have less repeated imports? but this multiplies the code in the module by too much and kills the idea of the modularisation in Angular2... – Serranid

I'm taking about 'modularisation' you need to create a separate module 'WidgetsModule' and import it in another module as same as 'FormsModule' – Leak

yes, but i do have the separate WidgetsModule. the question was about having to import it on every other module or if it could be shared in the same import of a parent module. But now i understand it can't be like this. Thank you! – Serranid