Two levels of empty path children seems to break static redirects

[chrisguttandin]

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

router

Is this a regression?

Yes

Description

Please consider the following set of routes:

// app.routes.ts
import { Routes } from '@angular/router';
import { One } from './one/one';
import { Two } from './two/two';

export const routes: Routes = [
    {
        children: [
            {
                component: Two,
                path: 'two'
            },
            {
                path: '',
                redirectTo: 'two'
            }
        ],
        component: One,
        path: 'one'
    },
    {
        path: '',
        redirectTo: 'one'
    }
];

When setting the outputMode to 'static' I would expect this to produce the following pre-rendered HTML files.

• /index.html (with a redirect to /one)
• /one/index.html (with a redirect to /one/two)
• /one/two/index.html (with a pre-rendered page)

This works a expected.

It breaks when splitting the routes in two separate files.

// children.routes.ts
import { Routes } from '@angular/router';
import { One } from './one/one';
import { Two } from './two/two';

export const routes: Routes = [
    {
        children: [
            {
                component: Two,
                path: 'two'
            },
            {
                path: '',
                redirectTo: 'two'
            }
        ],
        component: One,
        path: ''
    }
];

export { routes as default };

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        loadChildren: () => import('./children.routes'),
        path: 'one'
    },
    {
        path: '',
        redirectTo: 'one'
    }
];

Please provide a link to a minimal reproduction of the bug

https://github.com/chrisguttandin/example

Please provide the exception or error you saw

One of the redirects is now missing. There will be an empty file instead.

- /index.html (with a redirect to /one)
- /one/index.html (**is an empty file**)
- /one/two/index.html (with a pre-rendered page)

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

Angular CLI: 20.2.1
Node: 22.17.1
Package Manager: npm 8.19.3
OS: darwin arm64
    

Angular: 20.2.2
... animations, common, compiler, compiler-cli, core
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package                         Version
---------------------------------------
@angular-devkit/architect       0.2002.1
@angular-devkit/build-angular   20.2.1
@angular-devkit/core            20.2.1
@angular-devkit/schematics      20.2.1
@angular/cli                    20.2.1
@angular/ssr                    20.2.1
@schematics/angular             20.2.1
rxjs                            7.8.2
typescript                      5.8.3
zone.js                         0.15.1

Anything else?

No response

[JeanMeche]

Hi, could you please provide minimal working repro (either via a github repo or a stackblitz demo). That would help us investigate the issue thank you.

[atscott]

Just looking at what’s written, since there’s no runnable reproduction, the two are not equivalent in their nesting. The example without loadChildren should be:

export const routes: Routes = [
    {
        children: [{
            children: [
              {
                component: Two,
                path: 'two'
              },
              {
                path: '',
                redirectTo: 'two'
              },
            ],
            component: One,
            path: ''
        }],
        path: 'one'
    },
    {
        path: '',
        redirectTo: 'one'
    }
];

Or the example with loadChildren should move the ‘Component: One’ into the first file and have loadChildren on it.

Not saying there isn’t a bug, just pointing out that it may not be loadChildren, but the number of empty path children that causes the issue. Again, hard to say without a reproduction.

[chrisguttandin]

Thanks for taking a look @JeanMeche and @atscott. And sorry for not providing an example repo in the first place.

I created https://github.com/chrisguttandin/example. The first commit (https://github.com/chrisguttandin/example/commit/a789d10f8670696d3fedda8af92c8be7e03ddc64) adds the example code which works as expected. The second one (https://github.com/chrisguttandin/example/commit/ac06644486d71be9527e84557eb9d0f455902f59) adds the nested routes which results in the empty HTML file. And the last commit (https://github.com/chrisguttandin/example/commit/5a27d8a29893890a082a126ad8220e89f319769f) replicates the nesting with the empty path segment as @atscott pointed out.

It does indeed reproduce the bug. It seems to be unrelated to loadChildren and more about using an empty path segment.