CODEWITHSUNDEEP
javascriptangularroutesangular4-router
Reggi
Reggi

Reputation: 482

how to fix my angular 4 routing

I'm kind of new in the Angular 4 world and I came across this error when I want to route to /moviegroup/:id. For some reason I can't make it to work

app.routes.ts

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { MovieComponent } from '.é/movie/movie.component';
import { WizardComponent } from './wizard/wizard.component';

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'wizard', component: WizardComponent, pathMatch: 'full' },
    {
        path: 'moviegroup', 
        children: [
            { path: 'moviegroup/:id', component: MovieComponent, pathMatch: 'full' }
        ]
    }
];

export const routing = RouterModule.forRoot(routes, { preloadingStrategy: 
PreloadAllModules });

I can navigate to http://localhost/wizard, http://localhost/moviegroup but not to http://localhost/moviegroup/ecf84479-c23c-1702-8440-b252591364ec. I get the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'moviegroup/ecf84479-c23c-1702-8440-b252591364ec'
Error: Cannot match any routes. URL Segment: 'moviegroup/ecf84479-c23c-1702-8440-b252591364ec'

Here is my file structure: enter image description here

Any idea what I did wrong? If more info is required let me know!

Thanks, Reggi

Upvotes: 0

Views: 551

Answers (1)

Eugene
Eugene

Reputation: 1663

Remove moviegroup from the child path:

{
  path: 'moviegroup', 
  children: [
    { path: ':id', component: MovieComponent }
  ]
}

And also you don't need to include pathMatch: 'full' anywhere other than on empty route path with redirectTo.

Upvotes: 1

Related Questions