question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReferenceError: $localize is not defined

See original GitHub issue

🐞 Bug report

Command (mark with an x)

  • build

Is this a regression?

Possible, just if it is, we don’t know in which version was working 100% sure and in which one stopped working

Description

App with AOT compilation. When building the production application, sometimes (randomly) the build seems to not replace properly the $localize occurrences with the translations. Therefore seems to cause an issue in runtime, as it search for $localize which is not defined.

We migrated to use $localize with the cli command ng add @angular/localize. We thought would be a module / component issue, but we find this issue in random modules / components. And the worst part is that with the same code (no changes at all) if you build it 2 times, you can get a perfect build, or this error in random modules.

🔬 Minimal Reproduction

We cannot know how to reproduce it (as we manage to reproduce it - by building app several times - but we don’t know how to reproduce it in another project). (This is in production builds of angular with AOT) Its totally random and we don’t know what depends on. If you need anything of code, we could provide it, but would be by private as, we are not allowed to post it publicly by confidentiality limitations.

🔥 Exception or Error


ReferenceError: $localize is not defined
    at consts (shopfloor-card.component.ts:20)
    at xo (core.js:9690)
    at Oo (core.js:9665)
    at Ho (core.js:10436)
    at core.js:10277
    at ko (core.js:10264)
    at Object.es (core.js:14881)
    at x (shopfloor-page.component.html:12)
    at Lo (core.js:9599)
    at To (core.js:9402)

🌍 Your Environment


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.3
Node: 14.17.3
Package Manager: npm 6.14.7
OS: win32 x64

Angular: 12.2.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.3
@angular-devkit/build-angular   12.2.3
@angular-devkit/core            12.2.3
@angular-devkit/schematics      12.2.3
@schematics/angular             12.2.3
rxjs                            7.3.0
typescript                      4.3.5

Anything else relevant?

This is our packages.json versions


    -DEPENDENCIES-
    "@angular/animations": "^12.2.3",
    "@angular/cdk": "^12.2.3",
    "@angular/common": "^12.2.3",
    "@angular/compiler": "^12.2.3",
    "@angular/core": "^12.2.3",
    "@angular/forms": "^12.2.3",
    "@angular/localize": "~12.2.3",
    "@angular/platform-browser": "^12.2.3",
    "@angular/platform-browser-dynamic": "^12.2.3",
    "@angular/router": "^12.2.3",
    -DEV DEPENDENCIES-
    "@angular-devkit/build-angular": "^12.2.3",
    "@angular-eslint/builder": "12.3.1",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/schematics": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "^12.2.3",
    "@angular/compiler-cli": "^12.2.3",
    "@angular/language-service": "^12.2.3",

This is our polyfills.ts file:


/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js'; // Included with Angular CLI.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:72 (13 by maintainers)

github_iconTop GitHub Comments

2reactions
alan-agius4commented, Sep 30, 2021

Hi @submarines-and, firstly thanks for the reproduction, reproductions like this are paramount to get issues solved.

So far it appears that this issue is only reproducible when differential loading is enabled, also this doesn’t happen when NG_BUILD_MAX_WORKERS is configured to 2.

NG_BUILD_MAX_WORKERS=2 ng build --configuration=production
2reactions
petebacondarwincommented, Sep 30, 2021

@submarines-and - Awesome. This should really help us get to the bottom of it. I might not have time today but will try to reproduce locally before the weekend.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SSR (Express) Angular 9 - $localize is not defined
After having upgrading to Angular 9 i am facing the error : Uncaught ReferenceError: $localize is not defined Error: It looks like your ......
Read more >
916780 - Uncaught ReferenceError: Localized is not defined
Some of the site prevent the script to load and the console error is: Uncaught ReferenceError: Localized is not defined I believe that...
Read more >
Uncaught ReferenceError: $localize is not defined angular
This can be sloved by adding localization in angular terminal. For this do following command in angular terminal ng add @angular/localize.
Read more >
$localize Global Import Migration - Angular
This package requires a global $localize symbol to exist. The symbol is loaded by importing the @angular/localize/init module, which has the side effect...
Read more >
Angular 9 introduced a global `$localize()` function that needs ...
Angular 9 introduced a global `$localize()` function that needs to be loaded, Uncaught Error: It looks like your application or one of its ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found