ANGULAR error : 'app-header' is not a known element:

Question

DESIRED STRUCTURE and WORKING STRUCTURE in IMAGE below please see it first.

folder+componet+module structure and imports details IMAGE

ERROR:

ERROR in app/layouts/homepage/homepage.component.html:1:1 - error NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <app-header></app-header>
  ~~~~~~~~~~~~~~~~~~~~~~~~~

  app/layouts/homepage/homepage.component.ts:10:16
    10   templateUrl: './homepage.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

I don't want to import (SharedModule)shared.module.ts in app.module.ts, just want SharedModule in the modules where it has been used (homepage.module.ts + addNewUser.module.ts ).

checked:

List item

1. imported and exported HeaderComponent (header.component.ts) in shared.module.ts
2. imported (SharedModule)shared.module.ts in both homepage.module.ts + addNewUser.module.ts
3. imported HomepageModule + AddNewUserModule in app.module.ts
4. restarted CLI + PC

using angular 9

Answer 1

Problem solved, my mistakes

1. not imported HomepageComponent in homepage.module.ts
2. not exported HomepageComponent from homepage.module.ts

I have this help anyone in need.