Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

angular-query-experimental: `import * as ng` in pending-tasks-compat pulls all of @angular/core into the initial bundle

Geschlossen
  • Stimmt etwas nicht?
#12,319 1 Kommentar 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@benjavicente arbeitet bereits daran.

Seit 25.10.2026.

  • #12386 von @mixelburg — ohne Merge geschlossen

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
52/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
angular, typescript
Bereich
frontend, performance

Rechercherichtung

Start with packages/angular-query-experimental/src/pending-tasks-compat.ts, then trace how create-base-query and inject-mutation import it. Compare production bundle output for the Angular 22 lazy route described in the issue, with and without the compat module. Done means injectQuery and injectMutation no longer prevent tree shaking of @angular/core, while builds remain compatible with Angular 16–18.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

package: angular-query
Describe the bug

packages/angular-query-experimental/src/pending-tasks-compat.ts reads PendingTasks through a namespace import:

import * as ng from '@angular/core'
// …
const token = Reflect.get(ng, 'PendingTasks')

Because the namespace object is accessed dynamically, esbuild (Angular's application builder) can't tree-shake @angular/core. create-base-query (injectQuery, injectInfiniteQuery) and inject-mutation import this module, so using them, even only in a lazy-loaded route, puts most of @angular/core into the initial chunk.

This was reported before in #11614. Its author closed it a few minutes later because they were working around it locally. It still reproduces on the latest release (5.104.5, same dist/pending-tasks-compat.mjs), so I'm opening a new issue to track it.

How to reproduce

Angular 22 app with the application builder (esbuild), production build:

  1. provideTanStackQuery(new QueryClient()) in app.config.ts.
  2. A lazy route (loadComponent) whose component calls injectQuery(...).
  3. ng build and compare the initial bundle with and without step 2.
Numbers (our admin app, @tanstack/angular-query-experimental 5.104.1, Angular 22.2)
main-*.js Initial total
As published 512.14 kB 515.56 kB
pending-tasks-compat.mjs patched to a named import 327.05 kB 330.46 kB

Almost all of the difference is @angular/core (raw, from esbuild stats: 140 kB → 409 kB in main). The app code is ~4 kB in both builds.

Expected behavior

Using injectQuery/injectMutation shouldn't stop @angular/core from being tree-shaken.

Notes / possible directions

We know the namespace access is there because the peer range is @angular/core >=16 and PendingTasks only exists from v19, so a plain import { PendingTasks } would break builds on 16–18. Some options:

  • Drop the compat shim when the minimum supported Angular becomes 19 (named import, no Reflect.get).
  • Until then, keep the shim behind a separate entry point or build condition, so apps on ≥19 get the named import.

Workaround we use for now (Angular 22): a pnpm patch that replaces the namespace import with import { InjectionToken, PendingTasks, inject } from "@angular/core" and inject(PendingTasks, { optional: true }).

Versions
  • @tanstack/angular-query-experimental: 5.104.1 (also checked 5.104.5)
  • @angular/core: 22.2.3, application builder (esbuild)
Vorherrschende Sprache
TypeScript
Sterne
50.5k
Forks
4.2k
Ø Merge
8 Std. 14 Min.
Gemergte PRs (30 T.)
632

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/query

Alle Issues in TanStack/query

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.