angular-cli: TypeError: $localize is not a function => library components not translated

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

localize

Is this a regression?

Yes

Description

Hello,

I just migrated from 11 to 14. (had difficulties to do intermediate migrations so I made a fresh install)

My localized production builds fail to start with this error stack : _ERROR Error: Uncaught (in promise): TypeError: $localize is not a function consts@http://localhost/en/player/main.e48ad9d7ec515188.js:3:1262797_

Build is done with: ng build application --conifguration=production --localize

generated main.js starts with : var $localize=Object.assign(void 0===$localize?{}:$localize,{locale:“en”});

If build without localize option, I’m getting a slightly different error : $localize is not defined and the main.js does not contain the same first line

main.js contains this for each label to translate : $localize:@@button.logOut␟bb694b49d408265c91c62799c2b3a7e3151c824d␟3797778920049399855:Logout

Clearly, translation is not done. I tried to recreate my messages files but I get errors with extract-i18n : _Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/builders/extract-i18n/ivy-extract-loader.js): TypeError: Cannot create property ‘message’ on string 'dist\bg-common\fesm2020\bg-common.mjs: Unexpected messageParts for $localize (expected an array of strings).
4968 | i18n_0 = MSG_EXTERNAL_buttonYes$$LIB_BG_CORE_COMPONENTS_DIALOG_COMPONENT_TS__1; 4969 | } else {

4970 | i18n_0 = $localize(_t2 || (_t2 = :@@buttonYes␟4f20f2d5a6882190892e58b85f6ccbedfa737952␟2807800733729323332:Yes)); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 4971 | }

I was using $localize function in a few typescript componenst but I removed it and now I have only i18n attributes in HTML templates.

Development built works fine.

Regards

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

_ERROR Error: Uncaught (in promise): TypeError: $localize is not a function

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

Angular CLI: 14.0.2
Node: 16.15.1
Package Manager: npm 8.11.0
OS: win32 x64

Angular: 14.0.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.2
@angular-devkit/build-angular   14.0.2
@angular-devkit/core            14.0.2
@angular-devkit/schematics      14.0.2
@schematics/angular             14.0.2
rxjs                            7.5.5
typescript                      4.7.3

package.json : 
"dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/cdk": "^14.0.2",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/material": "^14.0.2",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "js-sha256": "^0.9.0",
    "ng-recaptcha": "^9.0.0",
    "ng2-charts": "^3.0.11",
    "ngx-image-cropper": "^6.1.0",
    "ngx-quill": "^17.0.0",
    "quill": "^1.3.7",
    "quill-better-table": "^1.2.10",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.2",
    "@angular/cli": "^14.0.2",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/localize": "^14.0.2",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }

Anything else?

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 46 (1 by maintainers)

Most upvoted comments

@alan-agius4 There’s a reproduction here. Can you take a look? WDYT?

What is happening here is that the configured browsers don’t support ES2015+, this causes the build output to be downlevelled to ES5 even though the tsconfig target setting is set to a higher version of ECMA. But the CLI uses the ES2015 parser of localize when the tsconfig target is not ES5.

The true cause of the problem here is that in the application browserslist config there are browsers which the Angular framework does’t support. Example iOS Safari 12. You can see https://angular.io/guide/browser-support#browser-support for the full list of supported browsers.

That said, probably we should handle this more gracefully / provide a better error message.

@alan-agius4 @JoostK found how to reproduce this:

Add ios_saf 12.2-12.6 (note that this is contained e.g. in > 0.5%) to .browserslist. Then adding components from library that are localized and running the production build reproduce the issue.

(@my-jupiler This is of course as well a workaround: just remove older browsers…)