ReferenceError: $localize is not defined

[mmonteiroc]

🐞 Bug report

Command (mark with an x)

• [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.

[alan-agius4]

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

[submarines-and]

That makes sense for us. Damn corporate IT and their legacy browsers!!!

I have applied the env variable workaround to all our builds and so far they have been running fine (although they have not ran super many times yet. Build times seem unaffected (although I would still choose 3x longer builds if that fixed the issue).

I will report back if I see anything new with the workaround active. Thank you for the help so far!

[alan-agius4]

I continue looking into this in the coming days. Although it worth to mention that in version 13 which is currently in pre-release differential loading has been removed since IE 11 will no longer be supported.

[submarines-and]

We will also phase out IE when 13 is released, most of our organisation has done so already but we have some countries with really old equipment that needs more time to upgrade. When the day comes I will celebrate!!

[mmonteiroc]

Hello :) just to be up-to-date. Do we have any news on this issue ? :)

[alan-agius4]

Hi all, can someone who experiencing this problem try out a snapshot build which contains the following PR https://github.com/angular/angular-cli/pull/21962 please?

npm install git+https://github.com/angular/angular-devkit-build-angular-builds.git#e2f5259078d3714c3a9a7bf49b9ae5ba2f40875a --save-dev

[mmonteiroc]

Will try it now, to launch some CI agents with this build. Tomorrow morning should have the results, of the pipelines running overnight ;)

[mmonteiroc]

@alan-agius4 the build you provided, it's making fail the ng build. with the following error.

styles.99c1ec51a11c5ecbb019.css - Error: (0 , _identifier.getUndoPath) is not a function

I've searched online, and seems to be a known issue. Was that expected with the build you provided us ??

[mmonteiroc]

14 builds failed with the same error :/

[mmonteiroc]

The curious thing is that for what I see, this issue is known for those who use nx. but in our side we don't use nx at all

[clydin]

@mmonteiroc That build error is generally due to an npm package hoisting defect (related Angular issues: #21567 & #21628) and can unfortunately happen if multiple Webpack versions (direct or transitive) are present in the project. Some users had success resolving the issue by completely removing the node modules directory and package lock file. It appears that mini-css-extract-plugin 2.4.1+ contains a fix to bypass the problem. We are investigating a backport of that version to 12.2.x to avoid the issue.

[clydin]

A snapshot build with the backported 2.4.1 version of mini-css-extract-plugin should now be available with the following:

npm install git+https://github.com/angular/angular-devkit-build-angular-builds.git#d4eab12086ccc34fc4ba5a8c9c1167776d5b624b --save-dev

[mmonteiroc]

@clydin Thanks for your response. In our case the node_modules deletion, would not work as we were doing that (as long as the package-lock changes - which did installing the new build)

Will try with the provided build you gave me now to see if it works ! Thank you :) Will give you the results asap

[mmonteiroc]

RESULTS: @clydin Out of 14 CI builds ran, 3 Failed with the same issue we had ( we break the build if we find occurrences of $localize in the builded code ). So unfortunately this does not fix the issue we had :(

[cwaespi]

@alan-agius4, @clydin We have also tested the snapshot and unfortunately did not get a positive result either. About half of all builds contain $localize variables.

[clydin]

If anyone has some additional time, could you please try out another snapshot build to see if it resolves your problem:

npm install git+https://github.com/angular/angular-devkit-build-angular-builds.git#181255d64435aefc41e899fbf8db7a93c808d8ee --save-dev

[cwaespi]

@clydin Just tested the new snapshot. 12 out of 12 builds were successful 🚀. Hope others have the same success.

[mmonteiroc]

I will run some CI agents overnight with the new snapshot, will tell you the results tomorrow morning ;)

[mmonteiroc]

@clydin @alan-agius4 6 out 9 builds failed in our side due the $loalize not being replaced. With more than 150+ occurrences found in the codebase in some builds

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[ozkoidi]

I can confirm that this issue is fixed in Angular 13. All the pipeline executions we tried worked flawlessly 👍 Thanks!

[angular-automatic-lock-bot[bot]]

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