Cannot match any routes for child paths

[bit-wrangler]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

My setup is the following

app.component.html

<router-outlet></router-outlet>
<ngx-ui-loader></ngx-ui-loader>

static-page-layout.component.html

<app-static-header></app-static-header>
<router-outlet name="static-outlet"></router-outlet>
<app-static-footer></app-static-footer>

top level routes:

[
  ...
  {
    path: 'static',
    component: StaticPageLayoutComponent,
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  ...
]

routes in pages module:

[
  ...
  {
    path: '',
    component: HomeComponent,
    outlet: 'static-outlet',
  },
  {
    path: 'contact-us',
    component: ContactUsComponent,
    outlet: 'static-outlet',
  },
  ...
]

The path /static seems to work fine.
However, whenever I click on any of the links (/static/contact-us, or similar), I get the "Cannot match any routes" exception.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: Cannot match any routes. URL Segment: 'static/contact-us'
    at ApplyRedirects.noMatchError (router.js:2658:1)
    at CatchSubscriber.selector (router.js:2640:1)
    at CatchSubscriber.error (catchError.js:27:1)
    at MapSubscriber._error (Subscriber.js:75:1)
    at MapSubscriber.error (Subscriber.js:55:1)
    at MapSubscriber._error (Subscriber.js:75:1)
    at MapSubscriber.error (Subscriber.js:55:1)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75:1)
    at ThrowIfEmptySubscriber.error (Subscriber.js:55:1)
    at TakeLastSubscriber._error (Subscriber.js:75:1)
    at resolvePromise (zone.js:1213:1)
    at resolvePromise (zone.js:1167:1)
    at zone.js:1279:1
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28659:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:582:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
    at invokeTask (zone.js:1600:1)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 12.2.1
Node: 14.18.1
Package Manager: npm 7.20.1
OS: win32 x64

Angular: 12.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.1
@angular-devkit/build-angular   12.2.1
@angular-devkit/core            12.2.1
@angular-devkit/schematics      12.2.1
@angular/cdk                    12.2.2
@angular/flex-layout            12.0.0-beta.34
@angular/material               12.2.2
@schematics/angular             12.2.1
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

No response

[bit-wrangler]

To follow up, even removing the lazy loading doesn't seem to help.

I went from

[
  ...
  {
    path: 'static',
    component: StaticPageLayoutComponent,
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  ...
]

to

[
  ...
  {
    path: 'static',
    component: StaticPageLayoutComponent,
    children: [
     ...
     {
       path: '',
       component: HomeComponent,
       outlet: 'static-outlet',
     },
     {
       path: 'contact-us',
       component: ContactUsComponent,
       outlet: 'static-outlet',
     },
  ...
   ]
  },
  ...
]

with the same outcome, so it seems that lazy loading isn't the culprit here.

[JoostK]

It looks to me that you're missing pathMatch: 'full' in the configuration of the HomeComponent route; effectively hiding the contact-us route because the empty path always matches.

[atscott]

Because you're using a named outlet, you need to be navigating to /static/(static-outlet:contact-us). Named outlets are covered here in the tutorial: https://angular.io/guide/router-tutorial-toh#displaying-multiple-routes-in-named-outlets

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}