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 !

Hope it helped 🙂

Also See:

• Get index of ngFor element using index as value in attribute
• Set default value in the dropdown list in Angular 9
• Dynamic and conditional CSS classes with ngClass : Angular
• Apply CSS style attribute dynamically with ngStyle : Angular 9
• Two-Way Data Binding – Example
• HTML Property Binding in Angular : Data Binding
• String Interpolation in Angular 9
• This version of CLI is only compatible with Angular versions
• Global Angular CLI version is greater than your local version
• Create custom events and fire in Angular 9 with EventEmitter – Example
• Display different colors for odd/even rows using ngFor loop and ngClass
• ERROR in multi /bootstrap.min.css ./src/styles.css in Angular 9
• Bind selected element from drop down to an object in Angular 9
• TrackBy with *ngFor in Angular 9 : Example
• Angular 9 EventEmitter – Custom Events : Example

References:

• angular docs