ReferenceError: $localize is not defined

[mmonteiroc]

🐞 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.

[petebacondarwin]

Are the translations in templates or are you using $localize yourself in code?

Are the components where this problem appears local or imported as libraries?

When this happens do "all" $localize instances remain, or only some of them?

[mmonteiroc]

@petebacondarwin

1st: seems to happen when we use $localize in the typescript. HTML templates translations looks correct

2nd: So local ones, even though, it does not happen in specific components as seems random

3rd: Not all, as part of our app remains working. But sometimes seems to happen in ALL as we get full white page and nothing on our app works

Remark: We have seen that in our xliff files, in the equiv-text for the translations this $localize appears in some translations.

Is this something to worry about ? Should we try to delete all the content of the equiv-text ? or this should not affect at all ?

[petebacondarwin]

The equiv-text attributes are purely for translators to see where the original message came from. So they should not be deleted and should not be relevant to your problem here.

[mmonteiroc]

As we thought.

Okei, something that comes to your mind that we can try then ? :)

[petebacondarwin]

How are you building the production build? Is it using Nx or just normal Angular CLI? Are you doing any special steps of your own?

[petebacondarwin]

Do you have lazy loaded chunks? Are the missing transformed $localize calls always confined to one or more of these chunk files?

[mmonteiroc]

To build: angular cli, we have this NPM script:
"build-i18n": "ng build --configuration=production --localize",

We use lazy loading for all our application modules.
Often when we can see the issue, we find it in a page of a module, but we don't find it in other pages of same module.

[petebacondarwin]

I don't have any other ideas without seeing the code. Is it possible to share the repo with me (or @alan-agius4) privately?

[mmonteiroc]

Will have to comment it with my colleagues / bosses and let you know.
Will answer you shortly ;) Thanks

[mmonteiroc]

@alan-agius4 @petebacondarwin
Could we talk privately ? I have talked with my superiors, and we cannot share the code and give direct access, but we could schedule a meeting(teams, zoom....) and share with you in it, all code you would need to find the issue and solve it.

[alan-agius4]

@petebacondarwin reached out via email.