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
JavaScript
x
4
1
<div>
2
<child-component></child-component>
3
</div>
4
and its service file is
JavaScript
1
12
12
1
@Component({
2
selector: 'my-parent-component',
3
templateUrl: './parent.component.html',
4
standalone: true,
5
imports: [
6
MyModule
7
]
8
})
9
export class ParentComponent {
10
11
}
12
The child component is in another module — MyModule. The my.module.ts file looks like
JavaScript
1
16
16
1
/* imports */
2
3
@NgModule({
4
declarations: [
5
ChildComponent
6
],
7
imports: [
8
9
]
10
})
11
export class MyModule {
12
constructor(entityDefinitionService: EntityDefinitionService) {
13
14
}
15
}
16
But my parent’s HTML is giving me the error on the
JavaScript
1
2
1
<child-component></child-component>
2
line …
JavaScript
1
4
1
'app-child-component' is not a known element:
2
1. If 'app-child-component' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
3
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.
4
Advertisement
Answer
Try to export ChildComponent
from the MyModule
, so you can use it somewhere else:
JavaScript
1
15
15
1
@NgModule({
2
declarations: [
3
ChildComponent
4
],
5
imports: [
6
7
],
8
exports: [ ChildComponent ]
9
})
10
export class MyModule {
11
constructor(entityDefinitionService: EntityDefinitionService) {
12
13
}
14
}
15