admin管理员组

文章数量:1024614

I'm using Angular 14. I have a standalone ponent in which I want to include a child ponent from another module. The standalone ponent looks like

<div>
    <child-ponent></child-ponent>
</div>

and its service file is

@Component({
  selector: 'my-parent-ponent',
  templateUrl: './parentponent.html',
  standalone: true,
  imports: [
    MyModule
  ]
})
export class ParentComponent {
  ...
}

The child ponent 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-ponent></child-ponent>    

line ...

'app-child-ponent' is not a known element:
1. If 'app-child-ponent' is an Angular ponent, then verify that it is included in the '@Component.imports' of this ponent.
2. If 'app-child-ponent' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this ponent to suppress this message.

I'm using Angular 14. I have a standalone ponent in which I want to include a child ponent from another module. The standalone ponent looks like

<div>
    <child-ponent></child-ponent>
</div>

and its service file is

@Component({
  selector: 'my-parent-ponent',
  templateUrl: './parent.ponent.html',
  standalone: true,
  imports: [
    MyModule
  ]
})
export class ParentComponent {
  ...
}

The child ponent 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-ponent></child-ponent>    

line ...

'app-child-ponent' is not a known element:
1. If 'app-child-ponent' is an Angular ponent, then verify that it is included in the '@Component.imports' of this ponent.
2. If 'app-child-ponent' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this ponent to suppress this message.
Share Improve this question edited Sep 21, 2022 at 20:03 NeNaD 20.6k11 gold badges61 silver badges114 bronze badges asked Sep 21, 2022 at 19:59 DaveDave 19.6k163 gold badges517 silver badges946 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

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) {
    ...
  }
}

And if you are not using app.module.ts or you are in version 17 and above you can try or fix this by using this

I'm using Angular 14. I have a standalone ponent in which I want to include a child ponent from another module. The standalone ponent looks like

<div>
    <child-ponent></child-ponent>
</div>

and its service file is

@Component({
  selector: 'my-parent-ponent',
  templateUrl: './parentponent.html',
  standalone: true,
  imports: [
    MyModule
  ]
})
export class ParentComponent {
  ...
}

The child ponent 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-ponent></child-ponent>    

line ...

'app-child-ponent' is not a known element:
1. If 'app-child-ponent' is an Angular ponent, then verify that it is included in the '@Component.imports' of this ponent.
2. If 'app-child-ponent' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this ponent to suppress this message.

I'm using Angular 14. I have a standalone ponent in which I want to include a child ponent from another module. The standalone ponent looks like

<div>
    <child-ponent></child-ponent>
</div>

and its service file is

@Component({
  selector: 'my-parent-ponent',
  templateUrl: './parent.ponent.html',
  standalone: true,
  imports: [
    MyModule
  ]
})
export class ParentComponent {
  ...
}

The child ponent 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-ponent></child-ponent>    

line ...

'app-child-ponent' is not a known element:
1. If 'app-child-ponent' is an Angular ponent, then verify that it is included in the '@Component.imports' of this ponent.
2. If 'app-child-ponent' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this ponent to suppress this message.
Share Improve this question edited Sep 21, 2022 at 20:03 NeNaD 20.6k11 gold badges61 silver badges114 bronze badges asked Sep 21, 2022 at 19:59 DaveDave 19.6k163 gold badges517 silver badges946 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

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) {
    ...
  }
}

And if you are not using app.module.ts or you are in version 17 and above you can try or fix this by using this

本文标签: