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))
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));