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

Aperta
#34,025 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
57/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
angular, typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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 │
└───────────────────────────┴───────────────────┴───────────────────┘

Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
3g 3h
PR unite (30g)
56

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/components

Tutte le issue di angular/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.