App
├── ...
└── recruit
    ├── ...
    ├── recruit.module
    └── job
        ├── job.component.html
        ├── ...
        └── component
            ├── ...
            ├── recruitment-child
            └── detail
                ├── ...
                └── recruit-detail-modal
                    ├── ...
                    ├── recruit-detail-modal.component.html
                    └── profile
                        └── profile.component.html

I new to Angular and I have a problem.

My app is like this. All I declare in recruit.module. With the recruitment-child in job.component.html. I call it normally.

<div *ngFor="let recruitment of recruitments">
   <app-recruitment-child [recruitment]="recruitment"></app-recruitment-child>
</div>

But I cant call profile.component.html in recruit-detail-modal.component.html.

<nz-tab>
   <recruit-detail-profile></recruit-detail-profile>
</nz-tab>

It notice that:

'recruit-detail-profile' is not a known element:

1. If 'recruit-detail-profile' is an Angular component, then verify that it is part of this module.
2. If 'recruit-detail-profile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I think I should add a module in recruit-detail-modal and declare recruit-detail-profile component

But how should I do?

CodePudding user response：

You need to export the component inside your Module

@NgModule({
    declarations: [RecruitDetailProfile],
    imports: [
        CommonModule
    ],
    exports: [RecruitDetailProfile]
})