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

Abierto
#34,025 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
57/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
angular, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
3 d 3 h
PR fusionados (30 d)
56

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.