angularangular-routingrouter-outletangular19

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


I am getting this error from router-outlet directive. Can anyone please help me why it is occuring as i have no clue. All the imports have been added on app.module.ts file but still its saying that please verify whether router-outlet is an angular component. Am using Angular 19 and this error is occuring only on the latest versions as the same code is running on previous ones

 **app.component.html**
    
        <router-outlet></router-outlet>
    
    **app.component.ts**
    
        import { Component } from '@angular/core';
        
        @Component({
          selector: 'app-root',
          standalone:false,
          templateUrl: './app.component.html',
          styleUrl: './app.component.css'
        })
        export class AppComponent {
          title = 'angular_19';
        
        }
    
    **app.module.ts**
    
        import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
    import { AppComponent } from "./app.component";
    import { BrowserModule } from "@angular/platform-browser";
    import { AppRoutingModule } from "./app.routes";
    import { DashboardComponent } from "./dashboard/dashboard.component";
    
    @NgModule({
        declarations:[
            AppComponent,
            DashboardComponent],
        imports:[
            BrowserModule,
            AppRoutingModule,
            RouterModule
        ],
        providers:[],
        bootstrap:[AppComponent],
        schemas:[CUSTOM_ELEMENTS_SCHEMA]
    
    
    })
    export class AppModule{}
    **app.router.ts**
    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { DashboardComponent } from './dashboard/dashboard.component';
    
     const routes: Routes = [
        {
            path: '',
            redirectTo: '/dashboard',
            pathMatch: 'full',
            component: DashboardComponent
        },  
        {
            path: 'dashboard',
            component: DashboardComponent
        }
    ];
    
    @NgModule({
        imports:[RouterModule.forRoot(routes)],
        exports:[RouterModule]
    })
    export class AppRoutingModule{
    
    }
**main.ts**

import { AppComponent } from './app/app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


platformBrowserDynamic().bootstrapModule(AppComponent)
.catch(err=>console.error(err))

Solution

  • Make sure your main.ts looks like this. I see you have supplied AppComponent instead of AppModule this might be the problem.

    If we use this method, the modular initialization will happen as expected.

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { AppModule } from './app/app.module';
    
    platformBrowserDynamic()
      .bootstrapModule(AppModule, {
        ngZoneEventCoalescing: true,
      })
      .catch((err) => console.error(err));