routing not working when trying with new component in tour of heroes - router

Question

src/app/app-routing.module.ts:12:113 - error TS1005: ',' expected.
{ path: 'newroutedisplay',component:NewRoutedisplayComponent} },
~
src/app/app-routing.module.ts:12:114 - error TS1128: Declaration or statement expected.
{ path: 'newroutedisplay',component:NewRoutedisplayComponent} this error is displayed
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import {NewRoutedisplayComponent} from './new-routedisplay/new-routedisplay.component';
const routes: Routes = [
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'newroutedisplay',component:NewRoutedisplayComponent} },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
this is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpClientModule } from '#angular/common/http';
import {CustomPipe} from './custom-pipe';
import { HeronewComponentComponent } from './heronew-component/heronew-component.component';
import {NewRoutedisplayComponent} from './new-routedisplay/new-routedisplay.component';
#NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent,
DashboardComponent,
CustomPipe,
HeronewComponentComponent,
NewRoutedisplayComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }