What causes "[NG HMR] Unknown input type ${oldElement.type}." in angular/angular-cli?

Use a standard HTML input type covered by the switch (text, checkbox, radio, password, email, number, date, time, url, tel, search, color, range, month, week, datetime-local, file, button, submit, reset, image).

angular/angular-cli · warning

[NG HMR] Unknown input type ${oldElement.type}.

Error message

[NG HMR] Unknown input type ${oldElement.type}.

What it means

A console.warn emitted while the Angular CLI HMR helper restores form values after a hot reload. restoreFormValues copies old input values to new inputs, switching on the old element's type attribute. Any input type outside the handled list (button/image/submit/reset, radio/checkbox, common text-ish types, file) falls into default and warns, and that element's value is not restored.

Source

Thrown at packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts:219

        case 'month':
        case 'number':
        case 'password':
        case 'range':
        case 'search':
        case 'tel':
        case 'text':
        case 'textarea':
        case 'time':
        case 'url':
        case 'week':
          newElement.value = oldElement.value;
          break;
        case 'file':
          // Ignored due: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement':
          // This input element accepts a filename, which may only be programmatically set to the empty string.
          break;
        default:
          console.warn('[NG HMR] Unknown input type ' + oldElement.type + '.');
          continue;
      }

      dispatchEvents(newElement);
    }
  } else if (oldInputs.length) {
    console.warn('[NG HMR] Cannot restore input/textarea values.');
  }

  // Restore option
  const newOptions = document.querySelectorAll('option');
  if (newOptions.length && newOptions.length === oldOptions.length) {
    console.log('[NG HMR] Restoring selected options.');
    for (let index = 0; index < newOptions.length; index++) {
      const newElement = newOptions[index];
      newElement.selected = oldOptions[index].selected;

      dispatchEvents(newElement);

View on GitHub (pinned to bb72145f9a)

Solutions

Use a standard HTML input type covered by the switch (text, checkbox, radio, password, email, number, date, time, url, tel, search, color, range, month, week, datetime-local, file, button, submit, reset, image).
If the element is not really an input, switch it to a textarea or a custom component so it is not matched by 'input:not([type="hidden"]), textarea'.
Treat the warning as benign for those fields and re-enter the values manually after the HMR update, or disable HMR.
Upgrade the Angular CLI, as the supported type list has been extended over time.

Example fix

<!-- before -->
<input type="fooBar" name="token">
<!-- after -->
<input type="text" name="token">

Defensive patterns

Strategy: validation

Validate before calling

const SUPPORTED = new Set(['button','image','submit','reset','radio','checkbox','color','date','datetime-local','email','hidden','month','number','password','range','search','tel','text','time','url','week','file','textarea']);
for (const el of document.querySelectorAll('input')) {
  if (!SUPPORTED.has(el.type)) console.warn('Unsupported input type for HMR restore:', el.type);
}

Type guard

function isRestorableInput(el: HTMLInputElement): boolean {
  return ['button','image','submit','reset','radio','checkbox','color','date','datetime-local','email','hidden','month','number','password','range','search','tel','text','time','url','week'].includes(el.type);
}

Prevention

Stick to standard HTML input type values in templates.
Lint templates for exotic type attributes.
Use custom components instead of repurposed input types.
Keep the Angular CLI updated for extended type support.

When it happens

Trigger: During restoreFormValues: an old input element has a type attribute not covered by the switch — e.g. custom/non-standard type values, new HTML input types added after the list was written, or a typeless input whose type property resolves to 'text' in exotic cases handled differently by the DOM.

Common situations: Using newer or exotic input types (e.g. type="searchbox", custom web-component inputs exposing a type property) in forms during HMR; template sets an invalid/empty type attribute; a browser normalizes type differently than the switch expects; very old Angular CLI versions with a shorter supported-type list.

Related errors

AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/00504e4045ea24d3. Report an issue: GitHub.