{"record":{"id":"a4d0d6e488a130ec","repo":"angular/angular-cli","slug":"ng-hmr-cannot-get-applicationref","errorCode":null,"errorMessage":"[NG HMR] Cannot get 'ApplicationRef'.","messagePattern":"\\[NG HMR\\] Cannot get 'ApplicationRef'\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts","lineNumber":144,"sourceCode":"function 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  }\n\n  return appRef;\n}\n\nfunction getPlatformRef(appRoot: any): PlatformRef | undefined {\n  const platformRef = getToken(appRoot, PlatformRef);\n  if (!platformRef) {\n    console.warn(`[NG HMR] Cannot get 'PlatformRef'.`);\n\n    return undefined;\n  }\n\n  return platformRef;\n}\n","sourceCodeStart":126,"sourceCodeEnd":162,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts#L126-L162","documentation":"This is a console.warn from the Angular CLI's HMR runtime helper (hmr-accept.ts), not a thrown exception. After a hot module replacement, the helper tries to fetch ApplicationRef from the current application root element via the global ng.getInjector(appRoot).get(ApplicationRef). If that lookup returns nothing, the warning is emitted and HMR aborts the re-bootstrap, so the app state is not carried over.","triggerScenarios":"mod.hot.dispose callback runs after an HMR update; getAppRoot() found an element with [ng-version], but ng.getInjector(appRoot).get(ApplicationRef) returns undefined/falsy — e.g. ng global is an object without a working getInjector, the bootstrapped root was replaced with a non-Angular element, or multiple/mismatched Angular platform instances exist.","commonSituations":"Scripts optimization or differential loading mangles/excludes the ng global needed for the lookup; the app was bootstrapped with a custom root selector so [ng-version] matches the wrong element; View Engine builds where getInjector is absent (though that path returns earlier); Ivy/JIT hybrid setups or duplicated @angular/core copies after a dependency upgrade.","solutions":["Ensure scripts optimization is disabled in development (angular.json: configurations.development.optimization.scripts = false) so the global ng object survives.","Confirm the application bootstraps through Angular's bootstrapModule/bootstrapApplication so the root element carries ng-version and a resolvable injector.","Deduplicate @angular/core: remove extra copies of Angular packages (check yarn/npm dedupe or lockfile) so ng.getInjector and ApplicationRef come from the same module instance.","As a last resort, disable HMR (serve with --no-hmr) and rely on full reloads."],"exampleFix":"// angular.json (development configuration) — before\n\"optimization\": true\n// after\n\"optimization\": {\n  \"scripts\": false,\n  \"styles\": false,\n  \"fonts\": false\n}","handlingStrategy":"validation","validationCode":"if (!(window as any).ng || typeof (window as any).ng.getInjector !== 'function') {\n  console.warn('[NG HMR] ng global unavailable; HMR state restore will not work.');\n}","typeGuard":"function hasNgInjector(ng: unknown): ng is { getInjector(el: Element): { get(token: unknown): unknown } } {\n  return typeof ng === 'object' && ng !== null && typeof (ng as any).getInjector === 'function';\n}","tryCatchPattern":null,"preventionTips":["Never enable scripts optimization in development configurations.","Keep exactly one copy of @angular/core in node_modules.","Bootstrap only one Angular platform per page.","Smoke-test HMR after major dependency upgrades."],"tags":["hmr","angular","webpack","dependency-injection"],"backgroundTag":"hmr-application-ref-lookup-failed","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}