Error : NG8001: 'router-outlet' is not a known element: in Angular

I am getting below error:

NG8001: router-outlet is not a known element:
If router-outlet is an Angular component, then verify that it is part of this module.
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:0:0:
0 │
╵ ^


Error occurs in the template of component AppComponent.

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


I have added AppRoutingModule in app.module, still I am getting this issue.

App.module file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
// import { HomeComponent } from './home/home.component';
// import { HeaderComponent } from './header/header.component';
// import { MovieComponent } from './movie/movie.component';
import { HttpClientModule } from '@angular/common/http';
//import { FeatureModule } from './feature/feature.module';
import { AppRoutingModule } from './app.routes';


@NgModule({
declarations: [
AppComponent,
LoginComponent
// HomeComponent,
// HeaderComponent,
// MovieComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
AppRoutingModule,
//FeatureModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }



app.routes.ts file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { MovieComponent } from './movie/movie.component';


export const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent },
{ path: 'movie/:type/:id', component: MovieComponent },
{ path: '**', component: LoginComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

console.log('AppRoutingModule loaded');


I am using below versions:

"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"bootstrap": "^5.3.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
"@angular-devkit/build-angular": "^18.2.1",
"@angular/cli": "^18.2.1",
"@angular/compiler-cli": "^18.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.2.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.2"

Continue reading...