René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"router-outlet should not affect layout (option to render as non-box/anchor)","articleBody":"### Which @angular/* package(s) are relevant/related to the feature request?\n\n`router`\n\n### Description\n\n\u003crouter-outlet\u003e is a marker element that does not contain the routed component’s DOM; the actual component root is rendered as a sibling after the outlet.\nHowever, the outlet element itself still participates in layout (inline/box). This can interfere with CSS Grid/Flexbox flows, gaps, and alignment, forcing developers to add a global stylesheet rule like:\n\n```css\nrouter-outlet { display: none; }\n```\n\nor similar hacks.\n\nRelated to: https://stackoverflow.com/questions/54868967/how-to-get-angulars-router-outlet-to-work-with-css-grid\n\n### Motivation\n\n- Avoid layout artifacts (extra empty grid/flex item, unexpected inline box).\n- Reduce boilerplate and “magic CSS” in every app and library.\n- Make router behavior consistent with other Angular structural anchors, which use comment anchors and do not create a layout box.\n\n\n### Proposed solution\n\n(any of the following would solve the problem)\n\n#### 1. Opt-in comment anchor for outlets\n\nAdd a configuration/flag so that router-outlet uses a comment node anchor (like `@if`) instead of an element. \nPossible shapes:\n\nRouter config:\n\n```typescript\nprovideRouter(routes, { outletAnchor: 'comment' /* | 'element' (default) */ });\n```\n\nOr attribute/boolean input on the outlet:\n\n```html\n\u003crouter-outlet anchor=\"comment\"\u003e\u003c/router-outlet\u003e\n```\n\nOr provide control-flow directive:\n```html\n@router-outlet;\n\n@router-outlet (name: 'secondary');\n\n@router-outlet { placeholder };\n\n@router-outlet (name: 'secondary') { placeholder };\n```\n\n#### 2. Documented \u0026 bundled style\n\nOfficially document and ship a built-in global style (or recommend it prominently in the Router docs) so apps don’t need to rediscover it:\n\n```css\nrouter-outlet { display: none /* or display: contents */; }\n```\n\n### Alternatives considered\n\nKeep relying on app-level CSS (`router-outlet { display:none }`).\nWorks, but it’s non-obvious, duplicated across apps, and easy to miss (especially inside Shadow DOM).","author":{"url":"https://github.com/MillerSvt","@type":"Person","name":"MillerSvt"},"datePublished":"2025-10-21T00:25:03.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2},"url":"https://github.com/64553/angular/issues/64553"}