angular/angular-cli · warning

[NG HMR] Cannot get 'ApplicationRef'.

Error message

[NG HMR] Cannot get 'ApplicationRef'.

What it means

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.

Source

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

function getAppRoot(): any {
  const appRoot = document.querySelector('[ng-version]');
  if (!appRoot) {
    console.warn('[NG HMR] Cannot find the application root component.');

    return undefined;
  }

  return appRoot;
}

function getToken<T>(appRoot: any, token: Type<T>): T | undefined {
  return (typeof ng === 'object' && ng.getInjector(appRoot).get(token)) || undefined;
}

function getApplicationRef(appRoot: any): ApplicationRef | undefined {
  const appRef = getToken(appRoot, ApplicationRef);
  if (!appRef) {
    console.warn(`[NG HMR] Cannot get 'ApplicationRef'.`);

    return undefined;
  }

  return appRef;
}

function getPlatformRef(appRoot: any): PlatformRef | undefined {
  const platformRef = getToken(appRoot, PlatformRef);
  if (!platformRef) {
    console.warn(`[NG HMR] Cannot get 'PlatformRef'.`);

    return undefined;
  }

  return platformRef;
}

View on GitHub (pinned to bb72145f9a)

Solutions

1. Ensure scripts optimization is disabled in development (angular.json: configurations.development.optimization.scripts = false) so the global ng object survives.
2. Confirm the application bootstraps through Angular's bootstrapModule/bootstrapApplication so the root element carries ng-version and a resolvable injector.
3. 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.
4. As a last resort, disable HMR (serve with --no-hmr) and rely on full reloads.

Example fix

// angular.json (development configuration) — before
"optimization": true
// after
"optimization": {
  "scripts": false,
  "styles": false,
  "fonts": false
}

if (!(window as any).ng || typeof (window as any).ng.getInjector !== 'function') {
  console.warn('[NG HMR] ng global unavailable; HMR state restore will not work.');
}

function hasNgInjector(ng: unknown): ng is { getInjector(el: Element): { get(token: unknown): unknown } } {
  return typeof ng === 'object' && ng !== null && typeof (ng as any).getInjector === 'function';
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• [NG HMR] Cannot get 'PlatformRef'.
• Webpack stats build result is required.
• The "application" and "browser-esbuild" builders do not supp
• Only the "application" and "browser-esbuild" builders suppor
• Only the "application" and "browser-esbuild" builders suppor

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