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

user_9555131 0
Viewed 2437

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

angular
2 Answers

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.

user_95551310

I kept running into this in my tests. My tests kept failing even though the application worked fine. I went round it for several days before figuring out that when you are using components from other modules you also need to import them into the *.spec.ts file

import { TestBed } from "@angular/core/testing";
import { RouterTestingModule } from "@angular/router/testing";
import { SharedModule } from "./shared/shared.module";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, SharedModule],
      declarations: [AppComponent],
    }).compileComponents();
  });

  it("should create the app", () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
user_6828790
Related