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)
@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…)