Angular 7 - Getting Component from imported Module

Question

I read all presented questions stack overflow showed me, none of which solved my issue.

I'm new to Angular and I have a couple Modules and Components. I want a child module to import a component. Then have a parent module import the child module and create it's component. And yes, I have exported the Component in the child module.

I want it like so:

• Parent Module
  • Child Module
    • Component (Toy)

But I get the error:

ERROR in parent/parent.module.ts(8,5): error TS2304: Cannot find name 'ToyComponent'.

I do not understand why this is not working. I would appreciate an explanation over some sample code. Thanks!

---

This is the relevant code:

Toy Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-toy',
  templateUrl: './toy.component.html',
  styleUrls: ['./toy.component.css']
})
export class ToyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Toy Component HTML

<p>
  Awesome toy!
</p>

---

Child Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToyComponent } from './toy/toy.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [
    ToyComponent,
    ChildComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ToyComponent
  ]
})
export class ChildModule { }

---

Parent Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildModule } from './child/child.module';
import { ParentComponent } from './parent.component';

@NgModule({
  declarations: [
    ToyComponent,
    ParentComponent
  ],
  imports: [
    ChildModule,
    CommonModule
  ],
  exports: [
  ]
})
export class ParentModule { }

Parent Component HTML

<p>
  parent works! Child: Toy: <app-toy></app-toy>
</p>

Answer 1

Fix:
1. Remove ToyComponent from the declarations and exports of ParentModule.
2. Declare ToyComponent in your Child Module and export it.
3. Add ChildModule as an import to your parent module.

Reason:
Your ToyComponent is declared under your ChildModule. Since you use ToyComponent in your ParentModule, you need to export your ToyComponent from your ChildModule. And import the ChildModule in your ParentModule.

Answer 2

Problem

It looks like that the import statement for ToyComponent is missing in ParentModule which causes the error.

Fix

• Since ToyComponent is added to exports in ChildModule it must not be referenced in ParentModule
• Remove ToyComponent from the declarations-list in ParentModule

The ToyComponent is known to the ParentModule because ChildModule is added to the imports-List.