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

Question

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"

Answer 1

You should import RouterOutlet in your component , Like this example:

import { RouterOutlet } from '@angular/router';

and provide it in imports:

imports: [
  RouterOutlet
],

Answer 2

try to add the RouterOutlet from @angular/router in your AppModule imports, like:

import { RouterOutlet } from '@angular/router';

imports: [RouterOutlet]