title: angular 2 children modules inheriting parent services
body: <p>In following the guide on <a href="https://angular.io/docs/ts/latest/guide/router.html#!#guards" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/router.html#!#guards</a>  we are breaking up different routes into nice bite size modules.. But it seems like a bit of an overhead in code now if for each module i need to include all the rel. services, providers and pipes...</p>
  
  <p>Does ang2 pass down the imports to the children modules?</p>
  
  <p>eg:
  ...</p>
  
  <pre><code>@NgModule({
      imports: [
          BrowserModule,
          DndModule.forRoot(),
          HttpModule,
          FormsModule,
          ReactiveFormsModule,
          AppRoutingModule,
          StoreModule.provideStore(
              StoreLoader.reducers(),
              StoreLoader.initialState()
          ),
          StoreDevtoolsModule.instrumentStore({
              monitor: useLogMonitor({
                  visible: BootstrapDataService.reduxStoreDebug(),
                  position: 'right'
              }),
          }),
          StoreLogMonitorModule,
          TranslateModule.forRoot({
              provide: TranslateLoader,
              useFactory: (http: Http) =&gt; new TranslateStaticLoader(
                  http,
                  window.crowdRoute + 'assets/i18n',
                  '.json'
              ),
              deps: [Http]
          })
      ],
      declarations: [
          //Pipes
          SummaryPipe,
          DateFormatPipe,
          MomentDatePipe,
          TimeAgoPipe,
          SanitizeHtml,
          SafePipe,
          ValuesPipe,
          DisplayNamePipe,
          UserHasPermissionPipe,
          UserHasRolePipe
      ],
      bootstrap: [CrowdComponent],
      providers: [
          BootstrapDataService,
          CommentService,
          Helpers,
          ImageService,
          ProjectService,
          SuggestionService,
          AuthService,
          AuthResolver,
          {
              provide: APP_BASE_HREF,
              useValue: window.crowdRoute
          },
          {
              provide: Http,
              useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) =&gt; new CrowdHttp(xhrBackend, requestOptions, router, null),
              deps: [XHRBackend, RequestOptions, Router]
          },
          {
              provide: BrowserXhr,
              useClass: CrowdBrowserXHR
          }
      ]
  })
  export class CrowdModule {}
  </code></pre>
  
  <p>Right now the app does not have split up modules for each area.. so right now all the providers etc are passed through the rest of the app.</p>
  
  <p>But... from the ang2 plunker <a href="https://angular.io/resources/live-examples/router/ts/plnkr.html" rel="nofollow noreferrer">https://angular.io/resources/live-examples/router/ts/plnkr.html</a>:</p>
  
  <pre><code>@NgModule({
    imports: [
      BrowserModule,
      FormsModule,
      HeroesModule,
      LoginRoutingModule,
      AppRoutingModule
    ],
    declarations: [
      AppComponent,
      LoginComponent
    ],
    providers: [
      DialogService
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>The main <code>app.module.ts</code> includes modules which themselves include their own routing etc.</p>