{"record":{"id":"5272f004667f578a","repo":"angular/angular-cli","slug":"ng-hmr-cannot-restore-selected-options","errorCode":null,"errorMessage":"[NG HMR] Cannot restore selected options.","messagePattern":"\\[NG HMR\\] Cannot restore selected options\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"info","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts","lineNumber":240,"sourceCode":"\n      dispatchEvents(newElement);\n    }\n  } else if (oldInputs.length) {\n    console.warn('[NG HMR] Cannot restore input/textarea values.');\n  }\n\n  // Restore option\n  const newOptions = document.querySelectorAll('option');\n  if (newOptions.length && newOptions.length === oldOptions.length) {\n    console.log('[NG HMR] Restoring selected options.');\n    for (let index = 0; index < newOptions.length; index++) {\n      const newElement = newOptions[index];\n      newElement.selected = oldOptions[index].selected;\n\n      dispatchEvents(newElement);\n    }\n  } else if (oldOptions.length) {\n    console.warn('[NG HMR] Cannot restore selected options.');\n  }\n}\n","sourceCodeStart":222,"sourceCodeEnd":243,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts#L222-L243","documentation":"A console.warn from the Angular CLI HMR helper meaning selected <option> states could not be restored after a hot reload. Like inputs, options are restored only when the count of new <option> elements equals the count captured before the update; otherwise the warning fires and select selections are lost.","triggerScenarios":"During restoreFormValues: oldOptions.length > 0 but newOptions.length !== oldOptions.length — the update changed the number of <option> elements in any select on the page (options added/removed), or new options were not yet rendered when restore ran.","commonSituations":"HMR update touches a component with a select whose options are generated dynamically (*ngFor over data that changed); options conditionally rendered; page contains multiple selects with option counts that differ after the update; async-loaded option lists not populated yet at restore time.","solutions":["Re-select the value after HMR (form controls bound with reactive forms or ngModel usually restore the selection automatically once the model rebinds).","Keep option lists stable across the edit, or drive selection from component state so it re-applies on the new DOM.","Persist selection state (service/localStorage) and reapply after the update if options are dynamic.","Disable HMR (--no-hmr) on pages where select state loss matters."],"exampleFix":"// before (template-driven options, selection lost)\n<option *ngFor=\"let o of opts\">{{o}}</option>\n// after (reactive binding restores value)\n<select [formControl]=\"sel\"><option *ngFor=\"let o of opts\" [value]=\"o\">{{o}}</option></select>","handlingStrategy":"fallback","validationCode":"const oldCount = document.querySelectorAll('option').length;\n// after HMR update:\nif (document.querySelectorAll('option').length !== oldCount) {\n  console.info('Option count changed; selections will not be restored by HMR.');\n}","typeGuard":"function canRestoreOptions(oldLen: number, newLen: number): boolean {\n  return oldLen > 0 && oldLen === newLen;\n}","tryCatchPattern":null,"preventionTips":["Bind selects with reactive forms or ngModel so selection follows state.","Keep dynamic option lists deterministic across HMR updates.","Reapply select values from component state after updates.","Prefer full reloads when editing code that renders options."],"tags":["hmr","angular","forms","dom"],"backgroundTag":"hmr-form-state-not-restored","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}