Angular 9 - Unable to discover lazy children routes

Lazy children, am I right?

Goal:

Angular project with main route, then a sub-route with a child-router-outlet to provide a ‘sub-nav’ of sorts with lazy-loaded children

 _________________________
|      |      PARENT      |
|      |     subheader    |
| ROOT | ---------------- |
| side |                  |
| nav  |                  |
|      |       CHILD      |
|      |                  |
|      |                  |
|      |                  |
|______|__________________|

Issue:

When using router children the discovery of the routes cannot be done when the child is lazy-loaded (loadChild). Seems to work fine with directly loaded components via component: ...

Symptoms:

Given a route config like:

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'child', component: ChildComponent },
    { path: 'lazy-child', loadChildren: () => import('./lazy-child/lazy-child.module').then(m => m.LazyChildModule) }
  ]},
];

An error/warning will be thrown from GuessJS:

Unable to extract routes from application.

And only the root will be prerendered:

Prerendering 1 route(s) to …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser CREATE …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/index.html (1232 bytes)

Expected:

Prerender the 4 routes (root, parent, child)

Prerendering 4 route(s) to …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser CREATE …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/index.html (1232 bytes) CREATE …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/parent/child/index.html (1359 bytes) CREATE …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/parent/lazy-child/index.html (1374 bytes) CREATE …/a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/parent/index.html (1315 bytes)

Above expected print was given when child route was changed to:

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'child', component: ChildComponent },
    { path: 'lazy-child', component: LazyChildComponent } // <-- Changed
  ]},
];

Reproduction:

Repo with issue: https://github.com/CharlyRipp/guessjs-a9-child-discovery-iss

Or a script that reproduces it from scratch - https://github.com/CharlyRipp/guessjs-a9-child-discovery-iss/blob/master/reproduce.sh. May be useful is seeing what’s changed from the plain project and generated files.

[CharlyRipp]

Many apologies – things got pretty crazy for a while, finally got around to retesting.

I updated the project (https://github.com/CharlyRipp/guessjs-a9-child-discovery-iss) to Angular 9.1.8 – universal builder 9.1.1 – guess-parser 0.4.18

guessjs-a9-child-discovery-iss(master): npm list guess-parser                                                
a9-child-discovery-iss@0.0.0 /guessjs-a9-child-discovery-iss
└─┬ @nguniversal/builders@9.1.1
  └── guess-parser@0.4.18 

And everything seems to work beautifully!

Prerendering 4 route(s) to /guessjs-a9-child-discovery-iss/dist/a9-child-discovery-iss/browser
CREATE /guessjs-a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/index.html (1079 bytes)
CREATE /guessjs-a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/parent/child/index.html (1206 bytes)
CREATE /guessjs-a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/parent/lazy-child/index.html (1221 bytes)
CREATE /guessjs-a9-child-discovery-iss/dist/a9-child-discovery-iss/browser/parent/index.html (1162 bytes)

The lazy-loaded module (lazy-child) is discovered and prerendered as expected!

[mgechev]

Thanks for providing the repro! I’ll try to look at it next week.