CODEWITHSUNDEEP
angulartypescript
Geoff
Geoff

Reputation: 6649

Reusing modules in angular2 fails

Am developing an angular2 website and i have a root module and a sub level module but whatever modules i include in the root module i have to reinclude in the sub level module hence not really reusable

This is hat i have

in the app module

@NgModule({
    declarations: [
       AppComponent,
       ComingSoonComponent,
     ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      AppRoutingModule,
      HomepageModule,  //included the homepage module
      OwlModule

   ],
 providers: [],
   bootstrap: [AppComponent]
  })
   export class AppModule { }

Now in the homepage module

@NgModule({
   imports: [
        CommonModule,
         OwlModule//already in the app module
    ],
    declarations: [HomepageComponent]
  })
 export class HomepageModule { }

The owl module is imported twice so that it works but if i import only in the app module then i get an error that

 If 'owl-carousel' is an Angular component, then verify that it is part of this module.

What could i be missing out since in an application involving multiple modules this can become abit tiresome having to duplicate imports

Upvotes: 0

Views: 95

Answers (1)

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37393

remove it from the AppModule and add it to the imports/exports arrays of HomepageModule:

HomepageModule :

    @NgModule({
       imports: [
            CommonModule,
            OwlModule
        ],
       exports: [
           OwlModule
        ],
        declarations: [HomepageComponent]
      })
     export class HomepageModule { }

AppModule:

@NgModule({
    declarations: [
       AppComponent,
       ComingSoonComponent,
     ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      AppRoutingModule,
      HomepageModule

   ],
 providers: [],
   bootstrap: [AppComponent]
  })
   export class AppModule {}

Upvotes: 1

Related Questions