{"record":{"id":"08965d69c167e520","repo":"angular/components","slug":"dialog-with-id-config-id-exists-already-the","errorCode":null,"errorMessage":"Dialog with id \"${config.id}\" exists already. The dialog id must be unique.","messagePattern":"Dialog with id \"(.+?)\" exists already\\. The dialog id must be unique\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/cdk/dialog/dialog.ts","lineNumber":132,"sourceCode":"  ): DialogRef<R, C>;\n\n  open<R = unknown, D = unknown, C = unknown>(\n    componentOrTemplateRef: ComponentType<C> | TemplateRef<C>,\n    config?: DialogConfig<D, DialogRef<R, C>>,\n  ): DialogRef<R, C> {\n    const defaults = (this._defaultOptions || new DialogConfig()) as DialogConfig<\n      D,\n      DialogRef<R, C>\n    >;\n    config = {...defaults, ...config};\n    config.id = config.id || this._idGenerator.getId('cdk-dialog-');\n\n    if (\n      config.id &&\n      this.getDialogById(config.id) &&\n      (typeof ngDevMode === 'undefined' || ngDevMode)\n    ) {\n      throw Error(`Dialog with id \"${config.id}\" exists already. The dialog id must be unique.`);\n    }\n\n    const overlayConfig = this._getOverlayConfig(config);\n    const overlayRef = createOverlayRef(this._injector, overlayConfig);\n    const dialogRef = new DialogRef(overlayRef, config);\n    const dialogContainer = this._attachContainer(overlayRef, dialogRef, config);\n\n    (dialogRef as {containerInstance: DialogContainer}).containerInstance = dialogContainer;\n\n    // If this is the first dialog that we're opening, hide all the non-overlay content.\n    if (!this.openDialogs.length) {\n      // Resolve this ahead of time, because some internal apps\n      // mock it out and depend on it being synchronous.\n      const overlayContainer = this._overlayContainer.getContainerElement();\n\n      if (dialogContainer._focusTrapped) {\n        dialogContainer._focusTrapped.pipe(take(1)).subscribe(() => {\n          this._hideNonDialogContentFromAssistiveTechnology(overlayContainer);","sourceCodeStart":114,"sourceCodeEnd":150,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/dialog/dialog.ts#L114-L150","documentation":"Dialog.open(config) rejects a custom config.id that is already in use by an open dialog. Because duplicate ids would break getDialogById and afterClosed lookups, the CDK throws when `config.id` matches an existing dialog's id. This check only runs in development (ngDevMode) but the constraint holds in production too.","triggerScenarios":"Calling this.dialog.open(SomeComponent, { id: 'settings' }) while a dialog with id 'settings' is still open; rendering two dialogs with the same hardcoded id, e.g. in a component rendered twice.","commonSituations":"Same dialog component instantiated in two places (list rows, tabs) each passing a shared static id; forgetting to close a dialog before reopening it with the same id; HMR or router re-entry leaving the old dialog open.","solutions":["Close the existing dialog first: find it via `this.dialog.getDialogById('my-id')?.close()` before opening.","Generate unique ids at runtime, e.g. `id: 'dialog-' + Math.random().toString(36).slice(2)` or a counter/UUID.","Reuse the existing dialog: if getDialogById returns one, focus/interact with it instead of opening a new one.","Omit the `id` property if you don't need deterministic lookup — Angular CDK assigns an auto id.","Track open state in a service so the same id is never passed while open."],"exampleFix":"// before\nthis.dialog.open(SettingsComponent, { id: 'settings' });\n// after\nconst existing = this.dialog.getDialogById('settings');\nif (existing) {\n  existing.close();\n}\nthis.dialog.open(SettingsComponent, { id: 'settings' });","handlingStrategy":"validation","validationCode":"const id = 'settings';\nif (dialog.getDialogById(id)) {\n  dialog.getDialogById(id)!.close(); // or return early\n}\ndialog.open(SettingsComponent, { id });","typeGuard":"function isOpen(dialog: Dialog, id: string): boolean {\n  return !!dialog.getDialogById(id);\n}","tryCatchPattern":"try {\n  return dialog.open(Comp, { id: 'fixed-id' });\n} catch (e) {\n  if ((e as Error).message.includes('exists already')) {\n    return dialog.getDialogById('fixed-id')!;\n  }\n  throw e;\n}","preventionTips":["Always check getDialogById before opening with a fixed id.","Prefer auto-generated ids unless lookup is required.","Use a service holding open dialog state for repeatable UI (rows, tabs).","Close dialogs in ngOnDestroy to avoid leaks causing future duplicates."],"tags":["angular","cdk","dialog","duplicate-id"],"backgroundTag":"duplicate-id","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-09-01T08:17:40.651Z"}