how to use parent module component in child module component in angular2

Question

I have header that should be used in both child and parent module.that was imported and used in parent module but when try to import and using in child component it showing error.I mean how to use common header for both parent and child module

Uncaught (in promise): Error:

Type HeaderComponent is part of the declarations of 2 modules: AppModule and ProviderModule! Please consider moving HeaderComponent to a higher module that imports AppModule and ProviderModule.

You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in AppModule and ProviderModule.

yes Uncaught (in promise): Error: Type HeaderComponent is part of the declarations of 2 modules: AppModule and ProviderModule! Please consider moving HeaderComponent to a higher module that imports AppModule and ProviderModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in AppModule and ProviderModule. — j dileep, Jun 10 '17 at 10:50
Edit: Error message added back into question for readability — Simon_Weaver, Jun 03 '18 at 03:00

ST7 · Accepted Answer · 2017-09-25T14:01:20.547

41

You should create a shared module with the components you want to use, export these components, and import the shared module in your other modules (parent and child for your case).

Shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent1 } from "./SharedComponent1";
import { SharedComponent2 } from "./SharedComponent2";

@NgModule({
imports: [
    CommonModule
],
declarations: [
    SharedComponent1,
    SharedComponent2
],
exports: [
    SharedComponent1,
    SharedComponent2
]
})
export class SharedModule {}

Using Shared module:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
...
import { SharedModule } from './SharedModule';

@NgModule({
imports: [
    CommonModule,
    ...
    SharedModule
],
declarations: [
    ...
],
providers: [
    ...
]
})
export class AppModule{}

edited Sep 25 '17 at 14:01

answered Jul 25 '17 at 09:57

ST7

2,272
1
20
13

1

The answer is beside the point. It is for the 2nd solution suggested by angular error message. as there is a 1st solution to share component in the higher module which import the other two modules share-use the component. – Hao Dec 14 '17 at 03:33
Anwser as boring as the angular github support... We expect a direct import either in parent or in child module and not some weird counter-measure invoking a third module. The error message suggests we have an unnecessary import so we must remove some lines, not adding a whole module. – Eta Feb 22 '18 at 14:39
2

I think this is an Angular flaw, this makes me want to avoid using parent and child modules altogether and just use regular modules so I can import whatever I need. What's the point of parent-child modules anyway? Routing? We are supposed to have separate modules for routing anyway. Even so, coupling module structure to route structure seems like a bad idea. You can't reuse anything. – Jens Nov 12 '18 at 19:31
This answer was exactly the way I needed to build my modules with the "starter pack" I am working with. I did a shared module to export my header and footer component so in all my child component modules, I was able to just import this module. – Patrice Poliquin Oct 31 '19 at 13:16
This is not the correct answer to the question. – Lenzman Dec 04 '21 at 06:46

score 7 · Answer 2 · answered May 06 '21 at 07:38

I have modified ST7s answer.

You should export the components of the parent module, you want to use in the child module. Then import the parent module in the child module.

Parent module (exporting shared components):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent1 } from "./SharedComponent1";
import { SharedComponent2 } from "./SharedComponent2";

@NgModule({
imports: [
    CommonModule
],
declarations: [
    SharedComponent1,
    SharedComponent2,
    ...
],
exports: [
    SharedComponent1,
    SharedComponent2
]
})
export class ParentModule {}

Child module (importing parent module):

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
...
import { ParentModule } from '../ParentModule';

@NgModule({
imports: [
    CommonModule,
    ...
    ParentModule
],
declarations: [
    ...
],
providers: [
    ...
]
})
export class ChildModule{}

score -6 · Answer 3 · answered Jun 10 '17 at 08:17

-6

It would have been great , if you can share the code and the specified the error you are getting.

As per my understanding , you basically want to pass some data from parent component to its child component .

For this , you need to use @Input to pass parent params to child.

Component Interaction between parent and child

Let me know , if it helps or not

answered Jun 10 '17 at 08:17

tom

3,720
5
26
48

thank you .I mean how to use common header for both child and parent module – j dileep Jun 10 '17 at 08:24
3

It describes about parent and child component .but i need **module interaction** – j dileep Jun 10 '17 at 08:30
1

basically you want that if some header changes in parent then it will automatically starts reflecting in child ? – tom Jun 10 '17 at 08:34
Thanks for effort.yeah i tried to import that parent module in child module.it showing error.it is not accepting – j dileep Jun 10 '17 at 08:37
Event Emitter might be what you are looking for https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html – tom Jun 10 '17 at 08:41
if you want to emit changes on a variable changes to some other component/module you can use Event Emitter on that variable and subscribe this event emitter to other component/module . now once any changes in that variable happens event emitter will let other componebt know and accordingly the information is passed. I hope , this is what you want , please marked it as useful and upvote it thanks – tom Jun 10 '17 at 08:46
1

Turns out that sometimes it really is worth reading downvoted answers. This is exactly what I was looking for. – Rapti Jul 04 '21 at 13:21

how to use parent module component in child module component in angular2

3 Answers3

Linked