Use component from AppModule in a child module in Angular X (X stands for 2+)

NgModules help organize an application into cohesive blocks of functionality.

Every Angular app has a root module class. By convention, the root module class is called AppModule and it exists in a file named app.module.ts.

What if I import the same module twice?

That's not a problem. When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.

That's true at whatever level A appears in a hierarchy of imported modules. When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports [C, B, A], then 'D' triggers the evaluation of 'C', which triggers the evaluation of 'B', which evaluates 'A'. When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.

Angular doesn't like modules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.

Link

Everything at the end compiles down to the Main App Module and importing it again in same module make the above condition true of circular dependency. And being the main Module it should ideally not have any exports to be used by other Modules.

Make a components module whose only job is to gather up the components, and export them, and import it in both places. At first it seems painful but then you realize it helps to organize what is used where and will scale.