‘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:

Leave a Reply

avatar
  Subscribe  
Notify of