CODEWITHSUNDEEP
angular
bsaz
bsaz

Reputation: 11

Angular Error: [ERROR] NG8001: is not a known element

I started a small web project using the Angular framework, marking my first endeavor into Angular development. I managed to work successfully through the provided tutorials and guidelines and built my frontend. Thus far, working exclusively with components has proceeded without any hitches. However when I started to use modules, issues started. I've encountered a confusing scenario during the importation of my custom modules and components.

The CLI output of the build process:

✘ [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

The same error occurs two more times with other components.

Despite research and attempting various solutions, I find myself still stuck at the same point. I'm uncertain of the root cause of this issue. Any suggestions, help, and best practice advice would be greatly appreciated.

King regards!

To point out the situation efficiently I wanted to post the code structure here. I only posted one component and module because the other two components.ts and module.ts files are built the same.

app.module.ts

import { RouterOutlet } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { HeaderComponentModule } from './header/header.module';
import { CertificateManagementComponentModule } from './certificate-management/certificate-management.module';
import { FooterComponentModule } from './footer/footer.module';

import { AppComponent } from "./app.component";
import { HeaderComponent } from './header/header.component';
import { CertificateManagementComponent } from './certificate-management/certificate-management.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
    declarations: [ 
        AppComponent,
        HeaderComponent,
        CertificateManagementComponent,
        FooterComponent
    ],
    imports:[ 
        RouterOutlet,
        NgbModule,
        BrowserModule, 
        FormsModule, 
        ReactiveFormsModule,
        HeaderComponentModule,
        CertificateManagementComponentModule,
        FooterComponentModule
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    bootstrap: [AppComponent]
})

export class AppModule { }

header.module.ts

import { NgModule } from "@angular/core";
import { HeaderComponent } from "./header.component";

@NgModule({
    imports: [],
    exports: [HeaderComponent],
    declarations: [HeaderComponent],
    providers: [],
})

export class HeaderComponentModule {

}

header.component.ts

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

@Component({
  selector: 'app-header',
  standalone: true,
  imports:[],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

the root src/app/app.component.html:

<main>
  <section>
    <app-header></app-header>
    <app-certificate-management></app-certificate-management>
    <app-footer></app-footer>
  </section>
</main>

Upvotes: 1

Views: 2623

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Remove standalone and imports from the header component:

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

@Component({
  selector: 'app-header',
  // standalone: true,
  // imports:[],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

When a component is a standalone component, we have to add it to the imports array of the module, when it's not a standalone component, we have to add it to the declarations array of the module and also export:

import { NgModule } from "@angular/core";
import { HeaderComponent } from "./header.component";

@NgModule({
    imports: [],
    exports: [HeaderComponent],
    declarations: [HeaderComponent],
    providers: [],
})

export class HeaderComponentModule {

}

Upvotes: 0

Related Questions