{"record":{"id":"3fd5b57d7d3aa009","repo":"angular/angular-cli","slug":"ng-hmr-cannot-find-the-application-root-componen","errorCode":null,"errorMessage":"[NG HMR] Cannot find the application root component.","messagePattern":"\\[NG HMR\\] Cannot find the application root component\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts","lineNumber":129,"sourceCode":"      // Wait until the application isStable to restore the form values\n      newAppRef.isStable\n        .pipe(\n          filter((isStable) => !!isStable),\n          take(1),\n        )\n        .subscribe(() => restoreFormValues(oldInputs, oldOptions));\n    }).observe(bodyElement, {\n      attributes: true,\n      subtree: true,\n      attributeFilter: ['ng-version'],\n    });\n  });\n}\n\nfunction getAppRoot(): any {\n  const appRoot = document.querySelector('[ng-version]');\n  if (!appRoot) {\n    console.warn('[NG HMR] Cannot find the application root component.');\n\n    return undefined;\n  }\n\n  return appRoot;\n}\n\nfunction getToken<T>(appRoot: any, token: Type<T>): T | undefined {\n  return (typeof ng === 'object' && ng.getInjector(appRoot).get(token)) || undefined;\n}\n\nfunction getApplicationRef(appRoot: any): ApplicationRef | undefined {\n  const appRef = getToken(appRoot, ApplicationRef);\n  if (!appRef) {\n    console.warn(`[NG HMR] Cannot get 'ApplicationRef'.`);\n\n    return undefined;\n  }","sourceCodeStart":111,"sourceCodeEnd":147,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts#L111-L147","documentation":"The HMR plugin's getAppRoot() locates the running application's root element by querying document.querySelector('[ng-version]') — the attribute Angular sets on the bootstrapped root component. When no element carries that attribute, HMR cannot determine the app root to re-render after an update, so it warns and returns undefined, aborting the HMR swap for the app root (newAppRoot/appRoot both depend on it).","triggerScenarios":"getAppRoot() runs during an HMR update (invoked via appRoot/newAppRoot) and document.querySelector('[ng-version]') returns null — i.e. the page DOM has no element with the ng-version attribute at the moment of the hot update.","commonSituations":"1) The application failed to bootstrap (runtime JS error before Angular rendered the root component), so ng-version was never set. 2) Custom bootstrap where the root selector/component differs or the app is rendered into a shadow root not visible to document.querySelector. 3) Multiple Angular apps or full page reload clearing the DOM mid-HMR. 4) SSR/hydration setups where the served HTML lacks ng-version until hydration completes. 5) HMR update arriving before initial render finished (early save after ng serve start).","solutions":["Fix any runtime bootstrap errors visible in the console — if Angular never rendered, ng-version is never set; a hard reload after fixing the error restores HMR.","Do a full page reload (not an HMR patch) after ng serve starts so the initial bootstrap completes before updates are applied.","If bootstrapping into a custom element or shadow DOM, ensure the root component element with ng-version is in the light DOM, or disable HMR (\"hmr\": false) and use live-reload.","Check that only one Angular application instance is bootstrapped per page and it is not destroyed before the HMR update.","If the warning appears only during SSR/hydration, defer HMR updates until after hydration or disable HMR for that configuration."],"exampleFix":"// before (main.ts, failing bootstrap)\nplatformBrowser().bootstrapModule(AppModule).catch(err => console.error(err)); // error swallowed, no ng-version in DOM\n\n// after: surface bootstrap failures and ensure root renders\nplatformBrowser()\n  .bootstrapModule(AppModule)\n  .catch(err => { console.error(err); throw err; });","handlingStrategy":"fallback","validationCode":"// Verify the Angular root element exists before/around HMR updates\nfunction appRootPresent(doc = document) {\n  return Boolean(doc.querySelector('[ng-version]'));\n}\nif (!appRootPresent()) {\n  console.warn('Angular root ([ng-version]) not in DOM — HMR cannot re-render; do a full reload.');\n  location.reload();\n}","typeGuard":"function isBootstrappedRootElement(el) {\n  return el instanceof HTMLElement && el.hasAttribute('ng-version');\n}","tryCatchPattern":"try {\n  const root = document.querySelector('[ng-version]');\n  if (!root) throw new Error('[NG HMR] application root not found');\n  // proceed with HMR re-render\n} catch (e) {\n  console.warn(String(e), '— falling back to full page reload');\n  location.reload();\n}","preventionTips":["Fix console errors at startup first: an unbootstrapped app has no [ng-version] element, so every HMR update will warn.","Avoid rendering the Angular root inside shadow DOM or a document fragment that document.querySelector cannot reach.","Bootstrap exactly one application per page and never remove the root element manually during development.","After starting ng serve, let the initial build/bootstrap finish (full load) before saving files that trigger HMR.","Disable HMR (\"hmr\": false) if your bootstrap pattern (SSR, custom elements, micro-frontends) is incompatible with it."],"tags":["hmr","bootstrap","dom","angular-cli","ng-version"],"backgroundTag":"hmr-app-root-not-found","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}