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]
})