Home > other >  child component selector failing with error "<element-tag>' is not a known element (
child component selector failing with error "<element-tag>' is not a known element (

Time:09-27

I have an Angular application (an extension for Chrome Dev Tools) with the following structure:

tool -> src -> app -> components -> devtool-panel -> home -> home-child

Home-Child is a component (not real name) that needs to receive information from Home. Its selector, let's call him app-home-child, is used on the Html of Home component.

<app-home-child [homeinfo]="homeinfo"></app-home-child>

Home component declares a variable; let's call that home-info.

HomeChild has the declaration

@Input homeinfo TypeHomeInfo

Home has the following home.module.ts in the folder src/app/components/devtool-panel/home

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

import { HomeChildModule } from './home-child/home-child.module';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, HomeChildModule],
})
export class HomeModule {}

and HomeChild has the following module on the folder src/app/components/devtool-panel/home/home-child


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeChildComponent } from './home-child.component';



@NgModule({
  declarations: [HomeChildComponent],
  imports: [
    CommonModule
  ]
})
export class HomeChildModule { }

Clearly I'm doing something wrong, because when I try to run this, I received the error

Error: apps/tool/src/app/devtool-panel/home/home.component.html:30:1 - error NG8001: 'app-home-child' is not a known element:
1. If 'app-home-child' is an Angular component, then verify that it is part of this module.
2. If 'app-home-child' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

30 <app-home-child [homeinfo]="homeinfo"> </app-home-child>

'''

I'll greatly appreciate any help

CodePudding user response:

maybe need to export HomeChildeComponent in HomeChildModule ,

try this:

@NgModule({
declarations: [HomeChildComponent],
 imports: [CommonModule],
  export:[HomeChildComponent]
   })
  • Related