Issue with Angular 4 Routes

Question

When I execute this code to redirectTo other component

this.router.navigate(['/distributed-chart/' + this.invested.risk]);

I have this issue in console:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'distributed-chart/54f9ef8a84d534d9490002d1'

app-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'simulation/simulate-saving-plan', pathMatch: 'full' },
    { path: 'simulation', loadChildren: 'app/simulation/simulation.module#SimulationModule' },
];

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

simulation-routing.module.ts

const routes: Routes = [
  { path: '', component: SimulationComponent,
  children:[
    { path: 'simulate-saving-plan', component: SimulateSavingPlanComponent },
    { path: 'distributed-chart/:risk', component: DistributedChartComponent },
    { path: 'expected-rent-chart', component: ExpectedRentChartComponent },
    { path: 'historic-chart', component: HistoricChartComponent }
  ]}
];

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

this.invested.risk is not defined. You should add crucial content to your question. — Carsten
– Carsten, Commented May 2, 2018 at 7:43
with your config it sould be this.router.navigate(['/simulation/distributed-chart/' + this.invested.risk]); if I am not mistaken — Riscie
– Riscie, Commented May 2, 2018 at 7:53
try to write the proper url manually in the browser until you find it and then you will easily spot the mistake ;) — Veselin Davidov
– Veselin Davidov, Commented May 2, 2018 at 7:57
The problem was here => this.router.navigate(['/simulation/distributed-chart/' + this.invested.risk]); I should add "simulation" at start of the router navigation, SOLVED! — Juan Garcia
– Juan Garcia, Commented May 2, 2018 at 8:05
Pro-tip: we prefer not to use the title to mark questions as solved here. The best way to do that is via an answer. I will post that for you, but if you would like to post it under your own name, ping me and I will delete my copy. — halfer
– halfer, Commented May 2, 2018 at 21:38

halfer · Accepted Answer · 2018-05-02 21:39:21Z

1

(Posted answer on behalf of the question author).

The problem was here:

this.router.navigate(['/simulation/distributed-chart/' + this.invested.risk]);

I should add "simulation" at start of the router navigation, solved!

answered May 2, 2018 at 21:39

community wiki

halfer

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with Angular 4 Routes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related