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[]?
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: