Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

@angular/ssr: page under nested empty-path routes is prerendered without the modulepreload hints of its lazy chunks (regression since 19.1.6)

未关闭
#34,320 0 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 1 天内回复

@alan-agius4 已经在做这个了。

开始于 2026年10月12日。

  • #34325 来自 @alan-agius4 —— 未关闭

评估

这个 Issue 还没有评估数据。

描述

area: @angular/ssr
Command

build

Is this a regression?

Yes, the previous version in which this bug was not present was: 19.1.5

Description

A prerendered page reached through an empty-path route nested under another empty-path route (a componentless '' route whose '' child is a loadChildren, whose own '' route is a loadComponent) is emitted without any <link rel="modulepreload"> hint for its own lazy chunks. A sibling page reached through a non-empty path with exactly the same lazy depth ('pricing' → loadChildren → '' loadComponent) gets both of its hints. The page itself renders correctly; only the hints are missing.

Measured with 22.2.2, outputMode: "static" (index.csr.html has 0 hints):

Routes / /pricing
'' (componentless) → '' loadChildren → '' loadComponent 0 (expected 2: home.routes, home-page) 2 (pricing.routes, pricing-page)
home flattened to a top-level '' loadComponent 1 (home-page, its only chunk) 2

Same nested routes on 19.1.5 vs 19.1.6 (both builds share 2 initial chunks, which index.csr.html also has):

Version / /pricing
19.1.5 4 (2 shared + home.routes + home-page) 4
19.1.6 2 (shared only) 4
@angular/ssr 19.1.5 with @angular/build 19.1.6 4 4

The chunk hashes are identical across these builds; only @angular/ssr makes the difference.

Likely cause (packages/angular/ssr/src/routes/ng-routes.ts): traverseRoutesConfig keys an empty-path route as addTrailingSlash(currentRoutePath). Under a non-empty parent the parent and its '' child get different keys (/pricing and /pricing/), which RouteTree.insert later merges with the last entry winning, the leaf that carries the accumulated preload. Under an empty-path parent both get the same key (/, or /es/ for es → '' → ''), and getRoutesFromAngularRouterConfig keeps only the first result per key (seenRoutes, added in 5bf5e5fd2 "fix(@angular/ssr): prioritize the first matching route over subsequent ones", #29539). The first result is the outer route, yielded before handleRoute appends its loadChildren preloads and before any descendant's loadComponent preloads, so the leaf's metadata with the preloads is dropped. That dedupe is right for competing sibling routes with the same path; here the later entry is a descendant in the same match chain, the route the router actually activates.

Expected: the prerendered page carries the hints of the route chain that renders it, as on 19.1.5 (for example, let a later result replace the kept one, or merge its preload, when it is a descendant of it rather than a sibling).

Real-world impact: our home page had 3 modulepreload hints against 12 on /pricing; flattening the home route to a top-level loadComponent gave 9.

Minimal Reproduction
npx -p @angular/[email protected] ng new repro --ssr --routing --style=css --skip-git --skip-tests --defaults --ai-config=none --package-manager=npm
cd repro
# angular.json: set "outputMode": "static"
# src/app/app.html: replace its content with <router-outlet />  (optional, only trims the placeholder)
# app.routes.server.ts stays as generated: [{ path: '**', renderMode: RenderMode.Prerender }]

src/app/app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', pathMatch: 'full', loadChildren: () => import('./home/home.routes') },
      { path: 'pricing', loadChildren: () => import('./pricing/pricing.routes') },
    ],
  },
];

src/app/home/home.routes.ts (and src/app/pricing/pricing.routes.ts, the same with ./pricing-page)

import { Routes } from '@angular/router';

export default [{ path: '', loadComponent: () => import('./home-page') }] satisfies Routes;

src/app/home/home-page.ts (and src/app/pricing/pricing-page.ts, the same with PricingPage)

import { Component } from '@angular/core';

@Component({ template: '<h1>Home page</h1>' })
export default class HomePage {}
npx ng build
grep -o '<link rel="modulepreload"[^>]*>' dist/repro/browser/index.html          # nothing
grep -o '<link rel="modulepreload"[^>]*>' dist/repro/browser/pricing/index.html  # 2 links

Workaround that brings / back to its hint, the page as a top-level route:

export const routes: Routes = [
  { path: '', pathMatch: 'full', loadComponent: () => import('./home/home-page') },
  { path: 'pricing', loadChildren: () => import('./pricing/pricing.routes') },
];
Exception or Error
None. The build succeeds ("Prerendered 2 static routes.") and both pages render their content; only the modulepreload hints of `/` are missing.
Your Environment
Angular CLI       : 22.2.2
Angular           : 22.2.2
Node.js           : 24.21.0
Package Manager   : npm 11.19.0
Operating System  : darwin arm64

@angular/build            22.2.2
@angular/cli              22.2.2
@angular/common           22.2.2
@angular/compiler         22.2.2
@angular/compiler-cli     22.2.2
@angular/core             22.2.2
@angular/forms            22.2.2
@angular/platform-browser 22.2.2
@angular/platform-server  22.2.2
@angular/router           22.2.2
@angular/ssr              22.2.2
rxjs                      7.8.2
typescript                6.0.3
Anything else relevant?
  • At the root, one empty-path level under another is enough: a top-level { path: '', pathMatch: 'full', loadChildren: () => import('./home/home.routes') } with no componentless wrapper also gives / 0 hints. So removing only the wrapper is not a workaround; the page itself must be the top-level '' route.
  • Not specific to the root: { path: 'es', children: [{ path: '', pathMatch: 'full', loadChildren: ... }, { path: 'pricing', loadChildren: ... }] } gives /es 0 hints and /es/pricing 2.
  • The per-route preload feature itself worked in 19.1.0–19.1.5; the seenRoutes dedupe appears in 19.1.6 and is still there in 22.2.2.
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
1 天 2 小时
30 天内合并 PR
156

环境准备

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。