{"record":{"id":"c95cc093ebe0f8b3","repo":"angular/angular-cli","slug":"ng-hmr-cannot-find-global-ng-likely-this-is-c","errorCode":null,"errorMessage":"[NG HMR] Cannot find global 'ng'. Likely this is caused because scripts optimization is enabled.","messagePattern":"\\[NG HMR\\] Cannot find global 'ng'\\. Likely this is caused because scripts optimization is enabled\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts","lineNumber":47,"sourceCode":"declare const Event: any;\n\nexport default function (mod: any): void {\n  if (!mod['hot']) {\n    return;\n  }\n\n  if (!isDevMode()) {\n    console.error(\n      `[NG HMR] Cannot use HMR when Angular is running in production mode. To prevent production mode, do not call 'enableProdMode()'.`,\n    );\n\n    return;\n  }\n\n  mod['hot'].accept();\n  mod['hot'].dispose(() => {\n    if (typeof ng === 'undefined') {\n      console.warn(\n        `[NG HMR] Cannot find global 'ng'. Likely this is caused because scripts optimization is enabled.`,\n      );\n\n      return;\n    }\n\n    if (!ng.getInjector) {\n      // View Engine\n      return;\n    }\n\n    // Reset JIT compiled components cache\n    ɵresetCompiledComponents();\n    const appRoot = getAppRoot();\n    if (!appRoot) {\n      return;\n    }\n","sourceCodeStart":29,"sourceCodeEnd":65,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts#L29-L65","documentation":"During Hot Module Replacement the HMR dispose callback (registered in hmr-accept.ts) checks for the Angular testing/global helper object 'ng' in the window scope. When scripts optimization is enabled, the UMD chunks that define the global 'ng' are minified/scope-isolated so the global no longer exists; HMR then logs this warning and aborts the dispose step because it cannot call ng.ɵɵhmr helper APIs.","triggerScenarios":"mod.hot.dispose callback runs after an HMR update while the global identifier 'ng' is undefined — caused by running ng serve / the dev server with optimization.scripts enabled (e.g. \"optimization\": true in the serve configuration or NG_BUILD optimization env).","commonSituations":"1) Serving with --configuration production (which enables optimization) while expecting HMR. 2) Custom serve configuration that sets \"optimization\": { \"scripts\": true }. 3) Copying build options into serve options. 4) HMR proxy setups where optimized vendor chunks hide the ng global.","solutions":["Disable scripts optimization in the serve configuration: \"optimization\": { \"scripts\": false, \"styles\": true } under configurations/development (or serve options).","Serve with the development configuration: ng serve --configuration development.","If you intentionally optimize scripts, accept that HMR dispose is degraded — this warning is non-fatal; do a full reload instead of relying on HMR state preservation.","Verify the ng global exists at runtime by checking window.ng in devtools; if absent while serving unoptimized, check for scripts that shadow/delete the global."],"exampleFix":"// before (angular.json, serve configuration)\n\"optimization\": true\n// => [NG HMR] Cannot find global 'ng'.\n\n// after\n\"configurations\": {\n  \"development\": {\n    \"optimization\": false,\n    \"hmr\": true\n  }\n}\n// ng serve --configuration development","handlingStrategy":"fallback","validationCode":"// In the app, verify the ng global exists before relying on HMR state preservation\nfunction hmrViable() {\n  return typeof ng !== 'undefined';\n}\nif (!hmrViable()) {\n  console.warn('[NG HMR] global ng missing (scripts optimization on?) — full reload will be used instead of HMR.');\n}","typeGuard":"function hasNgGlobal(win = window) {\n  return typeof win['ng'] !== 'undefined';\n}","tryCatchPattern":"try {\n  // HMR update flow\n  module.hot.dispose(() => { if (typeof ng === 'undefined') { location.reload(); return; } /* normal dispose */ });\n} catch (e) {\n  console.warn('[NG HMR] dispose failed, falling back to full reload', e);\n  location.reload();\n}","preventionTips":["Keep optimization.scripts disabled in serve/development configurations where HMR is used.","Serve with --configuration development; reserve optimized builds for ng build.","Add an angular.json lint rule or review step forbidding \"optimization\": true under serve options.","If HMR state preservation is not needed, ignore this warning — it is non-fatal; the app still rebuilds (full reload)."],"tags":["hmr","optimization","dev-server","angular-cli","ng-global"],"backgroundTag":"hmr-global-ng-missing","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}