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

Question

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:

Created a feature module
Moved a component from app module to feature module. Added the component in feature module in declarations list and exports list.
Removed the references of the moved component from app module
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.

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.

So newly moved component has the dependency in the app module? is that correct? — Sudhakar
– Sudhakar, Commented Mar 25, 2019 at 12:46
@Sudhakar, yes the moved component has a dependency on a component declared in app module — Dipendu Paul
– Dipendu Paul, Commented Mar 25, 2019 at 12:49
@DipenduPaul, Which is your root module? AppModule or future module? Are you importing the future module in App module? — Sudhakar
– Sudhakar, Commented Mar 25, 2019 at 12:52
can you restart cli ? and make sure name is correct for component and its selector — Nirali
– Nirali, Commented Mar 25, 2019 at 12:52

Michael W. Czechowski · Accepted Answer · 2019-03-25 12:53:32Z

1

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.

answered Mar 25, 2019 at 12:53

Michael W. Czechowski

3,4452 gold badges26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dipendu Paul Over a year ago

Thanks @Michael. I have imported the feature module into app module as suggested by you. I understood that a component of app module can use exported component of featured module. But can a component from feature module use a component from app module?

Sudhakar Over a year ago

@DipenduPaul, No It can't use the component from app module. If you want then you can create a common module and import the common module to future module and app module.

Dipendu Paul Over a year ago

Ok, that's an eye opener for me. I'll try your solution and mark it as answer. Thanks for the reply.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related