4

Im totaly confused about this error. I have a very basic simple routing:

const routes: Routes = [
    {
        path: '', component: FrameDefaultComponent, pathMatch: 'full',
        children: [
            {path: '', component: SiteCalculatorComponent},
            {path: 'site-notice', component: SiteSiteNoticeComponent}
        ]
    },
];

When i click the menu entrie for site-notice in the menu that looks like this:

menuEntries = [
    {
        title: 'Calculator',
        url: '/'
    },
    {
        title: 'Site Notice',
        url: '/site-notice'
    }
];

Then i get the following error:

core.js:1521 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'
Error: Cannot match any routes. URL Segment: 'site-notice'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
    at CatchSubscriber.selector (router.js:1340)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    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 ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
    at CatchSubscriber.selector (router.js:1340)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    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:3645)
    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)

The Routing looks for me like the routing system i every time used... But never saw this error.

Budi
  • 678
  • 2
  • 6
  • 27
  • Where did you define your routes? If you define it in app.module RouterModule.forRoot(routes) - include this. If it is a sub-module, then include this, RouterModule.forChild(routes). Hope this helps. – harold_mean2 Jul 02 '18 at 02:15

1 Answers1

9

Make pathMatch : 'prefix' for parent route or you could simply remove it.

pathMatch: 'full' for parent route will block the child routes from being executed.

const routes: Routes = [
    {
        path: '', component: FrameDefaultComponent, pathMatch: 'prefix',
        children: [
            {path: '', component: SiteCalculatorComponent},
            {path: 'site-notice', component: SiteSiteNoticeComponent}
        ]
    },
];
Amit Chigadani
  • 28,482
  • 13
  • 80
  • 98
  • This was the solution i was looking for! I still dont really understand the real useingCases for `pathMatch` The Angular documentation is not clear for me.https://angular.io/api/router/Routes Maybe you can give us a extendet explain for the possible `pathMatch`es – Budi Jul 02 '18 at 09:36
  • 1
    This should give you a fair idea on `pathMatch` attribute https://stackoverflow.com/questions/42992212/in-angular-what-is-pathmatch-full-and-what-effect-does-it-have – Amit Chigadani Jul 02 '18 at 09:44