TypeError: $localize is not a function after HMR Component update sent to client(s)

Which @angular/* package(s) are the source of the bug?

localize, compiler-cli

Is this a regression?

Yes

Description

Afer changes on template, the HMR sent to browser does not load (no changes are reflected) and when navigate from that component to another and then back to the changed one it does not show (it's broken) and there is a error message in the dev console (not in the terminal where ng serve is executed). The error says - "ERROR TypeError: $localize is not a function". I have tested it on edge, chrome and firefox (including private mode) - the error shows on all three of them.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

core.mjs:20865 Angular is running in development mode.
core.mjs:6672  ERROR TypeError: $localize is not a function
    at consts (partners-table.component.ts:252:28)
    at createTView (core.mjs:13028:58)
    at getOrCreateComponentTView (core.mjs:13003:24)
    at createRootComponentView (core.mjs:17535:47)
    at ComponentFactory.create (core.mjs:17410:25)
    at ViewContainerRef2.createComponent (core.mjs:17825:43)
    at _RouterOutlet.activateWith (router.mjs:2785:31)
    at ActivateRoutes.activateRoutes (router.mjs:3227:28)
    at router.mjs:3183:12
    at Array.forEach (<anonymous>)
    at ActivateRoutes.activateChildRoutes (router.mjs:3182:25)
    at ActivateRoutes.activateRoutes (router.mjs:3233:14)
    at router.mjs:3183:12
    at Array.forEach (<anonymous>)
    at ActivateRoutes.activateChildRoutes (router.mjs:3182:25)
handleError @ core.mjs:6672
next @ core.mjs:35097
ConsumerObserver2.next @ Subscriber.js:90
Subscriber2._next @ Subscriber.js:59
Subscriber2.next @ Subscriber.js:32
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:23
Subject2.next @ Subject.js:31
emit @ core.mjs:6063
(anonymous) @ core.mjs:6558
invoke @ zone.js:369
run @ zone.js:111
runOutsideAngular @ core.mjs:6420
onHandleError @ core.mjs:6558
handleError @ zone.js:373
runGuarded @ zone.js:124
api.microtaskDrainDone @ zone.js:2325
drainMicroTaskQueue @ zone.js:588
invokeTask @ zone.js:487
invokeTask @ zone.js:1138
globalCallback @ zone.js:1169
globalZoneAwareCallback @ zone.js:1202
client:907 [vite] server connection lost. Polling for restart...
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:998
handleMessage @ client:909
onMessage @ client:298
(anonymous) @ client:446
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004
client:979  WebSocket connection to 'ws://localhost:4200/' failed: 
ping @ client:979
waitForSuccessfulPing @ client:1004

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 19.1.2
Node: 23.5.0 (Unsupported)
Package Manager: npm 11.0.0
OS: linux x64

Angular: 19.1.1
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1901.2
@angular-devkit/build-angular      19.1.2
@angular-devkit/core               19.1.2
@angular-devkit/schematics         19.1.2
@angular/cdk                       19.1.0
@angular/cli                       19.1.2
@angular/material                  19.1.0
@angular/material-moment-adapter   19.1.0
@schematics/angular                19.1.2
ng-packagr                         19.1.0
rxjs                               7.8.1
typescript                         5.7.3
webpack                            5.97.1
zone.js                            0.15.0
    
Warning: The current version of Node (23.5.0) is not supported by Angular.

Anything else?

This is an old project working well until Angular 19.0 (included). It's mix of standalone components and modules - it's being refactored slowly to standalone.

Check if you have

"types": [
      "@angular/localize",
      "node"
]

in your tsconfig.app.json, and that you don't have import '@angular/localize/init'; anywhere in your repo.

@e-oz

Check if you have
"types": [
      "@angular/localize",
      "node"
]
in your tsconfig.app.json, and that you don't have import '@angular/localize/init'; anywhere in your repo.

@e-oz thx for the reply!

My tsconfig.app.json file contents:

/* To learn more about this file see: https://angular.io/config/tsconfig. */ 
{
 "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "noImplicitOverride": false,
    "types": [
      "@angular/localize"
    ],
    "noUnusedLocals": true
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

I probably have imported @angular/localize/init'; twice - in tsconfig.app.json and in angular.json. Just removed it from tsconfig.app.json - still have the same error

Does this happen on init or only after you make a change to the code?

Does this happen on init or only after you make a change to the code?

Only after the change. The component breaks only after I navigate from it and return back to it, or I navigate from another component (route) to the changed one (component)

Actually, when I navigate from different component to the changed one, I have different error - Failed to load resource: the server responded with a status of 404 (Not Found) & default-routing.module.ts:41 ERROR TypeError: Failed to fetch dynamically imported module: http://localhost:4200/chunk-72XCNK2Q.js

Is it possible this second error to be because of the mixture of app.routes.ts and xxx-routing.module.ts files with lazy loaded modules and components?

Removing the i18n config from angular.json fixes the first issue (the one with the error message - ERROR TypeError: $localize is not a function):

    "i18n": {
        "sourceLocale": "bg-BG",
        "locales": {
          "en": {
            "translation": "projects/xxx/src/locales/messages.us.xlf",
            "subPath": "en"
          },
          "bg": {
            "translation": "projects/xxx/src/locales/messages.xlf",
            "subPath": "bg"
          }
        }
      },

The compiled component still not refreshes from the HMR, but navigating back and forth, the updated templete is loaded.

So, probably this have something to do with the localize functionality?

The second one (with the message ERROR TypeError: Failed to fetch dynamically imported module:) still here.

I will try to play with the route config file.

UPDATE

It definitely has to do with the @angular/localize. As I mentioned above, a component without i18n attribute doesn't refreshes from the HMR, but navigating back and forth - it does catch up the update, but when I add the i18n attribute to a span tag, it breaks on navigating back to it!

UPDATE 2

This (ERROR TypeError: $localize is not a function) happens on a newly created project with the following angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "19-1-2": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "bg-BG",
        "locales": {
          "en": {
            "translation": "src/locale/messages.us.xlf",
            "subPath": "en"
          },
          "bg": {
            "translation": "src/locale/messages.xlf",
            "subPath": "bg"
          }
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/19-1-2",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js", "@angular/localize/init"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "localize": true,
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "localize": ["bg"]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "19-1-2:build:production"
            },
            "development": {
              "buildTarget": "19-1-2:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing",
              "@angular/localize/init"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
        }
      }
    }
  }
}

with extracted messages ng extract-i18n --output-path src/locale, after update and save the template and navigate away from it and back to it.

It's likely because we don't forward $localize to the HMR replacement script. I'll send a fix for the next release.

Actually, when I navigate from different component to the changed one, I have different error - Failed to load resource: the server responded with a status of 404 (Not Found) & default-routing.module.ts:41 ERROR TypeError: Failed to fetch dynamically imported module: http://localhost:4200/chunk-72XCNK2Q.js

Is it possible this second error to be because of the mixture of app.routes.ts and xxx-routing.module.ts files with lazy loaded modules and components?

This definitely has to do with the mix of app.routes.ts and xxx-routing.module.ts. I refactored part of my application and everything is working fine (except some small issues with SCSS files). It seems that the change sent by HMR does not bubble up correctly through all imported modules.

Another thing - I've removed the localize part of development config in angular.json file (it does nothing in development mode actually except some lazy ass dev stuff).

In recap - this all have to do with configuration and/or routing (mix of app.routes.ts and xxx-routing.module.ts). I probably have missed some upgrade guides or steps, or there are lack of detailed instructions to do so. I've started this app with angular 10 and have been upgrading it since.

@bogui

@bogui I started a project from scratch 3 days ago and bumped into the same problem. Localized components do not update with ng serve. If I set serve's localize to false the updates work.

So I'd say it's safe to assume it's not about missing a migration of any kind.

Needless to say, this makes inspecting that translations are working quite slow. I try if I can make a temporal fix locally by using runtime translations with ng serve and using precompiled translations in the production build.

@bogui

@bogui I started a project from scratch 3 days ago and bumped into the same problem. Localized components do not update with ng serve. If I set serve's localize to false the updates work.

So I'd say it's safe to assume it's not about missing a migration of any kind.

Needless to say, this makes inspecting that translations are working quite slow. I try if I can make a temporal fix locally by using runtime translations with ng serve and using precompiled translations in the production build.

@MattiJarvinen as @crisbeto mentioned, the problem is probably because the HMR doesn't forward the $localize script. While researching the cause of my problem, I realized, that localizing dev server with prebuild translations does nothing useful for me. Actually, it constantly shows warnings about missing translations on the console. I think, but not quite sure, that those prebuilt translations are more useful in staging env. imho.

Considering all this, every time I start new angular project, I have doubts about how should I twick angular.json "the angular way", when it starts growing and adding more angular packages.

This line in my navigation component breaks the HMR:
private readonly _viewContainerRef: ViewContainerRef = inject(ViewContainerRef);

I use @angular/material and have portal in this component. The component was generated using this schematic - ng generate @angular/material:navigation <component-name>.

I think, apart from the initial error, reported in the title (which resulted in easy fix for me), everything else is clear. I have to wait for more stable version in order to enjoy the HMR.

One weekend well spent :(

At least I refactored a bunch of code...

The ViewContainerRef issue has a fix in #59596.

@crisbeto

The ViewContainerRef issue has a fix in #59596.

@crisbeto I've fixed it in my project - extracted the blocking code in another component and all is working fine now. I have HMR, localization and all :)

I have the same issue in my large enterprise project:
TypeError: $localize is not a function after HMR update

Version 19.1.3 will fall back to refreshing the page if $localize is used during HMR.

@crisbeto

Version 19.1.3 will fall back to refreshing the page if $localize is used during HMR.

@crisbeto You mean when localize setting is set to true or array in development configuration of angular.json, or when a call to$localize is detected (or i18n attribute)?

I think it'll be done when any call to $localize is detected (generated code or manual). Here's the commit for reference: angular/angular-cli@c4de347. We'll work on properly supporting localized templates with HMR in the next batch of fixes.

Closing this ticket, since the issue was resolved and the fix was released in v19.1.3 of the CLI packages.

@AndrewKushnir

I do not think disable HRM is the solution for this issue @AndrewKushnir

@AndrewKushnir

I do not think disable HRM is the solution for this issue @AndrewKushnir

Could you please provide more information about this? Do you still see a problem after disabling HMR for your project? cc @clydin

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Repository navigation

TypeError: $localize is not a function after HMR Component update sent to client(s) #59605

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run `ng version`)

Anything else?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Sunbelt Computer Software

PL/B Language Development and Support

TypeError: $localize is not a function after HMR Component update sent to client(s) #59605

Description

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

Activity

e-oz commented on Jan 18, 2025

bogui commented on Jan 18, 2025

crisbeto commented on Jan 18, 2025

bogui commented on Jan 18, 2025

bogui commented on Jan 18, 2025

bogui commented on Jan 18, 2025

crisbeto commented on Jan 18, 2025

bogui commented on Jan 19, 2025

MattiJarvinen commented on Jan 19, 2025

bogui commented on Jan 19, 2025

bogui commented on Jan 19, 2025

crisbeto commented on Jan 19, 2025

bogui commented on Jan 19, 2025

juanchavezlive commented on Jan 19, 2025

crisbeto commented on Jan 20, 2025

bogui commented on Jan 20, 2025

crisbeto commented on Jan 20, 2025

AndrewKushnir commented on Jan 22, 2025

juanchavezlive commented on Jan 22, 2025

AndrewKushnir commented on Jan 22, 2025

angular-automatic-lock-bot commented on Feb 22, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Please provide the environment you discovered this bug in (run `ng version`)