Angular 4路由问题：调用router.navigate跳转时提示路由不匹配

Hey there, let's get this routing issue sorted out quickly! The error you're seeing (ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'distributed-chart/54f9ef8a84d534d9490002d1') is super straightforward—your Angular app doesn't have a routing rule set up for the distributed-chart path yet.

Looking at your current app-routing.module.ts config, you only have routes for the empty path (redirect) and the simulation lazy-loaded module. There's no entry for distributed-chart, so Angular has no clue where to send that navigation request.

Here are two common solutions depending on where your DistributedChartComponent lives:

1. If DistributedChartComponent is in the root AppModule #

Add a direct route entry to your root routes array, including a dynamic parameter for the risk ID you're passing:

const routes: Routes = [
  { path: '', redirectTo: 'simulation/simulate-saving-plan', pathMatch: 'full' },
  { path: 'simulation', loadChildren: 'app/simulation/simulation.module#SimulationModule' },
  // Add this line to handle the distributed-chart route with dynamic ID
  { path: 'distributed-chart/:riskId', component: DistributedChartComponent }
];

Don't forget to:

• Import DistributedChartComponent at the top of app-routing.module.ts
• Ensure the component is declared in your AppModule's declarations array (if it isn't already)

2. If DistributedChartComponent is in a separate child module (recommended for scalability) #

If you're using feature modules, set up lazy loading for the distributed-chart route:

Step 1: Create a routing module for your feature module #

In your distributed-chart module folder, create distributed-chart-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DistributedChartComponent } from './distributed-chart.component';

const routes: Routes = [
  // The dynamic parameter will capture the risk ID here
  { path: ':riskId', component: DistributedChartComponent }
];

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

Step 2: Update your feature module #

Import the routing module into your DistributedChartModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DistributedChartComponent } from './distributed-chart.component';
import { DistributedChartRoutingModule } from './distributed-chart-routing.module';

@NgModule({
  declarations: [DistributedChartComponent],
  imports: [CommonModule, DistributedChartRoutingModule]
})
export class DistributedChartModule { }

Step 3: Add the lazy-loaded route to your root routing config #

Update app-routing.module.ts to include the lazy load entry:

const routes: Routes = [
  { path: '', redirectTo: 'simulation/simulate-saving-plan', pathMatch: 'full' },
  { path: 'simulation', loadChildren: 'app/simulation/simulation.module#SimulationModule' },
  // Add lazy-loaded route for distributed-chart
  { path: 'distributed-chart', loadChildren: 'app/distributed-chart/distributed-chart.module#DistributedChartModule' }
];

Quick Validation Check #

Double-check that this.invested.risk is actually returning a valid string (like the 54f9ef8a84d534d9490002d1 in your error). If it's undefined or empty, your routing path would end up as distributed-chart/ (with a trailing slash), which might also cause issues. You can add a quick guard or check before navigating if needed.

内容的提问来源于stack exchange，提问作者Juan Garcia