Cannot match any routes. URL Segment: 'heroes'"

I based my work off of the tutorial Tour of Heroes tutorial as presented on Angular.io.

The app was created with the following command:

ng new toh --no-standalone --routing --ssr=false

I understand that "standalone" is the new default, but I opted to do without it since my company is using 15.2.2.

However I'm running into an issue that I can't figure out, and it starts in Chapter 5 (Routing).

After adding the app-routing.module.ts file as instructed, I'm told to add a router-outlet to my app.component.html file; and that once I've done so I should be able to browse to /heroes (the full url: http://localhost:4200/heroes) and view the list of heroes as constructed in earlier chapters.

However the following error occurs in the console:

main.ts:6 ERROR Error: NG04002: Cannot match any routes. URL Segment: 'heroes'
    at Recognizer.noMatchError (router.mjs:3654:12)
    at router.mjs:3687:20
    at catchError.js:10:39
    at OperatorSubscriber2._this._error (OperatorSubscriber.js:25:21)
    at Subscriber2.error (Subscriber.js:43:18)
    at Subscriber2._error (Subscriber.js:67:30)
    at Subscriber2.error (Subscriber.js:43:18)
    at Subscriber2._error (Subscriber.js:67:30)
    at Subscriber2.error (Subscriber.js:43:18)
    at Subscriber2._error (Subscriber.js:67:30)
Promise.then (async)        
(anonymous) @   main.ts:6
Show 26 more frames

I've tried setting the path to heroes and to /heroes
I've tried adding pathMatch: 'full' to the route definition.
I've tried explicitly adding the HeroesComponent definition to the imports array in this file.

FWIW, before I noticed the console error, I tried to move past it and create the DashboardComponent and add the navigation buttons. But this error occurs whether I manually browse to /heroes or whether I click a button to take me there.

Here's the complete src/app/app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent, },
]

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

Here's my package.json

  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.8",
    "@angular/cli": "^17.0.8",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.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.2.2"
  }

Solution

Its not pathing to the heroes component. Check the line

 import { HeroesComponent } from './heroes/heroes.component';

Does the pathing make sense. Then look at

   { path: 'heroes', component: HeroesComponent, },

Do the names match by case? Why is there a comma at the end, but no other items? Remove the comma if no other items.

In app.module.ts (name may be different its at the root level) is there an import such as

 import { AppRoutingModule } from './app-routing.module';

and is it being imported such as

  imports: [
    AppRoutingModule,
    ...

Also provide a default catch-all route to redirect to the start page, this is using the only route you provided:

   { path: '**', redirectTo: 'heroes' }