‘app-header’ is not a known element

Angular 9 Error : ‘app-header’ is not a known element

This tutorial guides you on how to resolve angular error ‘app-header’ is not a known element after adding header component manually in your angular application.

‘app-header’ is not a known element

Are you facing error ‘app-header’ is not a known element after adding header component manually in your angular application ?

ERROR in src/app/app.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>
      ~~~~~~~~~~~~~~~~~~~~~~~~~

      src/app/app.component.ts:5:16
        5   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.

header.component.ts

import { Component } from '@angular/core';


@Component({
   selector:'app-header',
   templateUrl: './header.component.html'
})

export class HeaderComponent {

}

app.component.html

<app-header></app-header>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>My first angular app</h2>
        </div>
    </div>
</div>

Solved : ‘app-header’ is not a known element error

The angular error:  ‘app-header’ is not a known element is a common error that you may get when you create header component manually. You need to register components or features that you are going to use in your App Module (app.module.ts)

First, you need to add header component details manually to the declarations array in app.module.ts file. Since, you have not used angular CLI to create the header component, it was not added automatically to the declarations array.

NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

You also need to import header component which you might have created under app folder using the following import statement.

import { HeaderComponent } from './header/header.component'

Now, your App Module (app.module.ts) file should look like the below one.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component'

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That’s it. Now you had unlocked the header component or feature to be used in your app and the error ‘app-header’ is not a known element that you were facing should have gone away !

‘app-header’ is not a known element

Hope it helped 🙂

Also See:

References:

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Siraj Ali
Siraj Ali
1 year ago

i am tying the same things but still get same error please any other solution ?
i am header in dashboard.module.ts module ont in app module which is using lazyLoading router

Siraj Ali
Siraj Ali
1 year ago

I am using Angular 14 i am tying the same things but still get same error please any other solution ? i am using sidebarr in dashboard.module.ts module which is using lazyLoading router. Like This: { path: ‘customer’, loadChildren: () => import(‘./customer-dashboard/customer-dashboard-routing.module’).then(m => m.CustomerDashboardRoutingModule) } It’s my module file code import { SidebarrComponent } from ‘./sidebarr/sidebarr.component’; @NgModule({ declarations: [ CustomerDashboardComponent, EditProfileComponent, SidebarrComponent ], And bellow is my dashboard.component.html file code <div class=“col-12 col-xl-3 filter-column”> <app-sidebarr></app-sidebarr> </div> => Geting Error Error: src/app/customer-dashboard/customer-dashboard.component.html:32:16 – error NG8001: ‘app-sidebarr’ is not a known element: 1. If ‘app-sidebarr’ is an Angular component, then verify that… Read more »