bug(cdk/portal): DOM node inserted at the wrong place

Offen
#34,025 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
57/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
angular, typescript
Bereich
frontend

Rechercherichtung

Start with the linked reproduction commit and trace how cdkPortalOutlet inserts portal content relative to its outlet in Angular CDK. Reproduce the reported behavior, then locate or add a focused test for portal placement. Done means the SVG appears where the outlet is declared, with the test confirming the placement.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: cdk/portal gemini-triaged needs triage
Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

Instead of being inserted at the location of the portal outlet, the DOM node in the portal is inserted at the end of the component's template.

Reproduction

StackBlitz doesn't work in my browser.

https://codeberg.org/Gouvernathor/ParliamentDiagram-Angular/commit/95ada2ff983f4e22109b50392cfa9e2706aa7f6c

Expected Behavior

The SVG diagram should be inserted at the place where I wrote the ng-template carrying the cdkPortalOutlet directive, which is at the beginning of the component.

Actual Behavior

The SVG diagram is inserted at the end of the component.

Environment

Angular CLI : 22.1.3
Angular : 22.1.1
Node.js : 26.4.0
Package Manager : npm 11.12.0
Operating System : win32 x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 22.1.3 │ ^22.1.3 │
│ @angular/cdk │ 22.1.1 │ ^22.1.1 │
│ @angular/cli │ 22.1.3 │ ^22.1.3 │
│ @angular/common │ 22.1.1 │ ^22.1.1 │
│ @angular/compiler │ 22.1.1 │ ^22.1.1 │
│ @angular/compiler-cli │ 22.1.1 │ ^22.1.1 │
│ @angular/core │ 22.1.1 │ ^22.1.1 │
│ @angular/forms │ 22.1.1 │ ^22.1.1 │
│ @angular/material │ 22.1.1 │ ^22.1.1 │
│ @angular/platform-browser │ 22.1.1 │ ^22.1.1 │
│ @angular/router │ 22.1.1 │ ^22.1.1 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 6.0.3 │ ~6.0.3 │
│ vitest │ 4.1.10 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘

Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
3 T. 3 Std.
Gemergte PRs (30 T.)
56

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 angular/components

Alle Issues in angular/components

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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