Issue
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 theimports
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' }
Answered By - ΩmegaMan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.