We are currently working on a project that has the following hierarchy.
app/
├── app.component.html
├── app.component.ts
├── app.module.ts <--moduleA and moduleB is imported here
├── app-routing.module.ts
├── moduleA/
│ ├── moduleA-routing.module.ts
│ ├── moduleA.module.spec.ts
│ ├── moduleA.module.ts
│ ├── moduleA.component.ts
│ └── moduleA.component.html
├── moduleB/
│ ├── moduleB-routing.module.ts
│ ├── moduleB.module.ts <-- moduleC is imported here
│ ├── moduleB.component.module.ts
│ ├── moduleB.component.html
│ ├── moduleB.component.ts
| ├── moduleC/
│ │ ├── moduleC-routing.module.ts
│ │ ├── moduleC.module.ts
│ │ ├── moduleC.component.module.ts
│ │ ├── moduleC.component.html --> Need to use moduleA component here
│ │ └── moduleC.component.ts
moduleC is a sub-module of moduleB. We have already imported moduleA in AppModule. The question arises - can we access components of moduleA in moduleC without reimporting moduleA within moduleC? In simpler terms, do we need to import a module that has already been included in AppModule again in its child module just to utilize its components?.
When we attempted to do so without importing moduleA again in moduleC, an error was thrown:
"Template parse errors: {{selector name}} is not a known element"
However, upon importing it again, everything worked as expected.