CODEWITHSUNDEEP
javascriptangulardependency-injection
Dipendu Paul
Dipendu Paul

Reputation: 2753

Using a component of app module in a component of feature module

I was trying to refactor my angular source into multiple feature modules. Earlier the source had only one module and all the components were declared inside that single module. For refactoring, I did following steps:

  1. Created a feature module

  2. Moved a component from app module to feature module. Added the component in feature module in declarations list and exports list.

  3. Removed the references of the moved component from app module

  4. Imported feature module into app module.

The source code compiles, but the site does not load. On the console, I could see it crashes because the component in feature module, on its html has used a component from app module.

error on console

I thought there is no extra step required to use a component from app module in a feature module. Am I missing something?

Added: Below HTML is from the moved component(component that I moved from app module to feature module), which is using app-organization-user-search component declared in app module. 

<div class="col-md-12 full-width py-2">
        <app-organization-user-search (addClicked)="addParticipant($event)" (cancelClicked)="addingParticipants = false"></app-organization-user-search>

Added: To all those who are searching answer to the specific problem, the solution is in the comments of the accepted answer.

Upvotes: 2

Views: 1120

Answers (1)

Michael W. Czechowski
Michael W. Czechowski

Reputation: 3455

For splitting one module into multiple ones, you should mind to export and import all modules and components correctly:

app.module.ts *the „root“ module

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // angular
    BrowserModule,
    HttpClientModule,
    // splitted modules
    DiversityMattersModule,
    PreventingAirPolutionModule,
    PeacfullyRevolutionModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

diversity-matters.module.ts Example module from list above

@NgModule({
  imports: [
    // ...
  ],
  declarations: [
    AwesomeComponent,
    // ...
  ],
  exports: [
    AwesomeComponent,
    // ...
  ],
})

Every component that depends on AppComponent is now allowed to import AwesomeComponent.

Upvotes: 1

Related Questions