ERROR NG8001: 'app-header' is not a known element:

It seems that my error is because it cannot read my app-header and app-footer. I don't know how to fix because it seems I already import all the necessaries things in my app.module.ts.

Below is my error:

X [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. [plugin angular-compiler]

src/app/app.component.html:10:0:
10 │ <app-header/>
╵ ~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:5:15:
5 │ templateUrl: './app.component.html'
╵ ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

src/app/app.component.html:11:0:
11 │ <router-outlet/>
╵ ~~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:5:15:
5 │ templateUrl: './app.component.html'
╵ ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'app-footer' is not a known element:
1. If 'app-footer' is an Angular component, then verify that it is part of this module.
2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

src/app/app.component.html:12:0:
12 │ <app-footer/>
╵ ~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:5:15:
5 │ templateUrl: './app.component.html'


My version is Angular CLI: 18.2.7. Please check my code below:

Below is my app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }


Below is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/profile', pathMatch: 'full' },
{ path: 'profile', component: ProfileComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }`

`header.component.ts:`
`import {Component} from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {}


Below is my footer.component.ts:

import {Component} from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent {
getCurrentYear() {
const date = new Date();
return date.getFullYear();
}
}

Continue reading...