{"record":{"id":"4c4d76f92916066e","repo":"angular/components","slug":"attempting-to-attach-a-portal-to-a-null-portaloutl","errorCode":null,"errorMessage":"Attempting to attach a portal to a null PortalOutlet","messagePattern":"Attempting to attach a portal to a null PortalOutlet","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/cdk/portal/portal-errors.ts","lineNumber":49,"sourceCode":"}\n\n/**\n * Throws an exception when attempting to attach an unknown portal type.\n * @docs-private\n */\nexport function throwUnknownPortalTypeError() {\n  throw Error(\n    'Attempting to attach an unknown Portal type. BasePortalOutlet accepts either ' +\n      'a ComponentPortal or a TemplatePortal.',\n  );\n}\n\n/**\n * Throws an exception when attempting to attach a portal to a null host.\n * @docs-private\n */\nexport function throwNullPortalOutletError() {\n  throw Error('Attempting to attach a portal to a null PortalOutlet');\n}\n\n/**\n * Throws an exception when attempting to detach a portal that is not attached.\n * @docs-private\n */\nexport function throwNoPortalAttachedError() {\n  throw Error('Attempting to detach a portal that is not attached to a host');\n}\n","sourceCodeStart":31,"sourceCodeEnd":59,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/portal/portal-errors.ts#L31-L59","documentation":"Thrown by the Angular CDK Portal API when code calls attach() on a Portal with a host that is null or undefined. The library requires a valid PortalOutlet (usually a DomPortalOutlet or a component/.directive implementing CdkPortalOutlet) before a portal can be attached, so attaching to nothing is a programming mistake and is rejected immediately in dev mode.","triggerScenarios":"Calling portal.attach(outlet) where the outlet argument is null/undefined; calling attach() on a CdkPortalOutlet whose host view container has not been initialized yet; resolving an outlet reference (e.g. @ViewChild) before the view is rendered.","commonSituations":"Attaching a portal in ngOnInit or a constructor before the outlet's view is created; a template conditional (ngIf) removing the <ng-template cdkPortalOutlet> element; forgetting to pass the outlet argument; a destroyed outlet still referenced by code.","solutions":["Ensure the PortalOutlet exists and is initialized before calling attach — attach after the view is initialized (ngAfterViewInit) or inside a ngAfterViewInit/afterNextRender callback","Check for null before attaching: if (outlet) portal.attach(outlet)","If the outlet is inside an *ngIf, guarantee it is rendered (or use a always-present container) before attaching","If the outlet may be destroyed/recreated, re-resolve the reference (e.g. via @ViewChild query) before each attach"],"exampleFix":"// before\n@ViewChild(CdkPortalOutlet) outlet: CdkPortalOutlet;\nngOnInit() {\n  this.portal.attach(this.outlet); // outlet may be undefined here\n}\n// after\n@ViewChild(CdkPortalOutlet) outlet: CdkPortalOutlet;\nngAfterViewInit() {\n  if (this.outlet) {\n    this.portal.attach(this.outlet);\n  }\n}","handlingStrategy":"validation","validationCode":"if (!outlet) {\n  throw new Error('Cannot attach portal: outlet is null. Attach after the view is initialized (ngAfterViewInit).');\n}\nportal.attach(outlet);","typeGuard":"function hasOutlet(outlet: PortalOutlet | null | undefined): outlet is PortalOutlet {\n  return outlet != null;\n}","tryCatchPattern":"try {\n  portal.attach(outlet);\n} catch (e) {\n  if (e instanceof Error && e.message.includes('null PortalOutlet')) {\n    console.warn('Portal outlet not ready; retrying after view init');\n  } else {\n    throw e;\n  }\n}","preventionTips":["Attach portals in ngAfterViewInit or afterNextRender, never in ngOnInit/constructor","Guard outlet references with null checks before attach","Avoid placing CdkPortalOutlet behind *ngIf unless you re-resolve the reference after it renders","Rely on CdkPortalOutlet's directive API instead of manual DomPortalOutlet construction when possible"],"tags":["angular","cdk","portal","null-reference"],"backgroundTag":"null-portal-outlet-attach","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}