Error: Cannot match any routes. URL Segment: '?'

Question

I am trying to access a sub-route of the sub-route, as you can see in the skills-missions-init-routing.module.ts file, the first route worked but the second one could not access, every time I try to access the route it has this error.

I wonder what would be the way to access the second route without executing this error

skills-missions-init-routing.module.ts

const routesSkills: Routes = [
  {
    path: 'skills-missions-init',
    children: [
      {
        path: ':id', component: SkillsMissionsInitComponent,
        children: [
          {
            path: ':view', component: ViewMissionComponent, outlet: 'list',
            children: [
              // This is the route I'm trying to access
              { path: 'get-ready-for-mission', component: GetReadyForMissionComponent, outlet: 'list' }, 
            ]
          }
        ]
      }
    ]
  },
];

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

the model stayed that way


@NgModule({
  declarations: [
    ViewMissionComponent,
    GetReadyForMissionComponent
  ],
  imports: [
    CommonModule,
    SkillsMissionsInitRoutingModule
  ],
  exports: [
    SkillsMissionsInitRoutingModule,
    GetReadyForMissionComponent
  ],
  bootstrap: [SkillsMissionsInitComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SkillsMissionsInitModule { }

This route ran executed as desired

The route looks this way.

http://10.0.3.18:4200/#/skills-missions-init/lead-by-example/(list:11)

  /**
   * redirectViewMission
   */
  public redirectViewMission(id: number, key: string) {
    return this.router.navigate(['/skills-missions-init', key, { outlets: { list: [id] } }], { relativeTo: this.routeActivated });
  }

I tried to access the route with this code snippet, but it always displays the error


  /**
   * getReadyForMission
   */
  public getReadyForMission() {
    console.log(this.competency, this.behavior);
    return this.router.navigate(
      [
        'skills-missions-init',
        this.competency,
        { outlets: { list: [this.behavior, 'get-ready-for-mission'] } }
      ],
      { relativeTo: this.routeActivated }
    );
  }

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'skills-missions-init/lead-by-example' Error: Cannot match any routes. URL Segment: 'skills-missions-init/lead-by-example' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2434) at CatchSubscriber.selector (router.js:2415) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:14051) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540)

    ApplyRedirects.prototype.noMatchError = function (e) {
        return new Error("Cannot match any routes. URL Segment: '" + e.segmentGroup + "'");
    };

Well I tried to leave the most detailed, if anyone has any more questions and can help me, I'll be waiting.

score 0 · Answer 1 · answered Jan 22 '19 at 19:47

to solve this problem quickly, but it's not what I wanted, I used it that way

const routesSkills: Routes = [
  {
    path: 'skills-missions-init',
    children: [
      {
        path: ':id', component: SkillsMissionsInitComponent,
        children: [
          { path: ':view', component: ViewMissionComponent, outlet: 'list' },
          { path: ':view/get-ready-for-mission', component: GetReadyForMissionComponent, outlet: 'list' },
        ]
      }
    ]
  }
];

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


  /**
   * getReadyForMission
   */
  public getReadyForMission() {
    return this.router.navigate(
      [
        'skills-missions-init',
        this.competency,
        { outlets: { list: [this.behavior, 'get-ready-for-mission'] } }
      ],
    );
  }

The link stayed that way.

http://10.0.3.18:4200/#/skills-missions-init/be-digital/(list:14/get-ready-for-mission)

Error: Cannot match any routes. URL Segment: '?'

1 Answers1