I’m using Angular 14. I have a standalone component in which I want to include a child component from another module. The standalone component looks like
<div> <child-component></child-component> </div>
and its service file is
@Component({ selector: 'my-parent-component', templateUrl: './parent.component.html', standalone: true, imports: [ MyModule ] }) export class ParentComponent { ... }
The child component is in another module — MyModule. The my.module.ts file looks like
/* imports */ @NgModule({ declarations: [ ChildComponent ], imports: [ ... ] }) export class MyModule { constructor(entityDefinitionService: EntityDefinitionService) { ... } }
But my parent’s HTML is giving me the error on the
<child-component></child-component>
line …
'app-child-component' is not a known element: 1. If 'app-child-component' is an Angular component, then verify that it is included in the '@Component.imports' of this component. 2. If 'app-child-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
Advertisement
Answer
Try to export ChildComponent
from the MyModule
, so you can use it somewhere else:
@NgModule({ declarations: [ ChildComponent ], imports: [ ... ], exports: [ ChildComponent ] }) export class MyModule { constructor(entityDefinitionService: EntityDefinitionService) { ... } }