i18n-polyfill: Angular 9 - Unhandled Promise rejection: this._input.charCodeAt is not a function

Hi guys, Today we tried upgrading to Angular 9 and It required us to install @angular/localize ( not sure if this is related)

However, after running ng update @angular/core @angular/cli, we don’t seem to hit any errors except for one that seems to be coming from this polyfill.

The full error is:

zone.js:699 Unhandled Promise rejection: this._input.charCodeAt is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: this._input.charCodeAt is not a function
    at Tokenizer.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.Tokenizer._advance (ngx-translate-i18n-polyfill.js:1370)
    at new Tokenizer (ngx-translate-i18n-polyfill.js:1184)
    at tokenize (ngx-translate-i18n-polyfill.js:1136)
    at Parser.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.Parser.parse (ngx-translate-i18n-polyfill.js:2160)
    at XliffParser.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.XliffParser.parse (ngx-translate-i18n-polyfill.js:3651)
    at xliffLoadToI18n (ngx-translate-i18n-polyfill.js:3622)
    at Function.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.TranslationBundle.load (ngx-translate-i18n-polyfill.js:7748)
    at new I18n (ngx-translate-i18n-polyfill.js:8478)
    at Function.I18n_Factory [as ɵfac] (ngx-translate-i18n-polyfill.js:8504)
    at Object.factory (ngx-translate-i18n-polyfill.js:8505) TypeError: this._input.charCodeAt is not a function
    at Tokenizer.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.Tokenizer._advance (http://localhost:4000/vendor.js:86129:71)
    at new Tokenizer (http://localhost:4000/vendor.js:85943:14)
    at tokenize (http://localhost:4000/vendor.js:85895:12)
    at Parser.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.Parser.parse (http://localhost:4000/vendor.js:86919:48)
    at XliffParser.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.XliffParser.parse (http://localhost:4000/vendor.js:88410:71)
    at xliffLoadToI18n (http://localhost:4000/vendor.js:88381:26)
    at Function.push../node_modules/@ngx-translate/i18n-polyfill/__ivy_ngcc__/fesm5/ngx-translate-i18n-polyfill.js.TranslationBundle.load (http://localhost:4000/vendor.js:92507:49)
    at new I18n (http://localhost:4000/vendor.js:93237:69)
    at Function.I18n_Factory [as ɵfac] (http://localhost:4000/vendor.js:93263:47)
    at Object.factory (http://localhost:4000/vendor.js:93264:130)

Did anyone stumble on this same issue perhaps, while updating to Angular 9 - and has a solution for it?

Or does this require an update on the polyfill from your side, @ocombe

Big thanks in advance!

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 3
  • Comments: 25 (3 by maintainers)

Commits related to this issue

Most upvoted comments

That was new feature for me. Thanks. Here it is. It assume that you have named I18n by i18n. In my case some has used i18 for some reason. ANd also some has used public instead of private. https://gist.github.com/JanneHarju/fd17609a81d50ae34f6b32c3c5d8284a

@ocombe We loved the polyfill but are migrating to angular 9. In that regard it be super helpful for others if you could update the polyfill documentation to point out that:

  • angular 9 now supports code based localization via $localize`::@@some-id:source text`
  • and that you have created a tool that performs the extraction (since angular CLI does not yet)

While the information is available, it took us a while to assemble it all together.

Nice but unfortunately this seems not to be documented yet. Any idea on how to autogenerate the xlf files from the *.ts files? As far as I know they are not yet parsing them.

@ocombe You could include short migration guide:

$localize:`meaning|description@@id:message`
  1. Replace all occurrences with the new syntax:

    • You can use this regex in VSCode: Search:

      (.*)this\.i18n\(\{\n[\s\/]*meaning:[\s\n]*'(.*)',\n[\s\/]*description:[\s\n]*'(.*)',\n[\s\/]*id:[\s\n]*'(.*)',\n[\s\/]*value:[\s\n]*['`](.*)['`]\n[\s\/]*\}\)
      

      Replace:

      $1$localize`:$5|$3@@$4:$2`
      
  2. Remove all i18n usings such as:

import { I18n } from '@ngx-translate/i18n-polyfill';
private i18n: I18n

Some Caveats:

  • be aware of existing tranlation functions that are named differently or whose attributes are in a different order
  • be aware that meaning, description and id can no longer contain :-symbol
  • be aware that message should not contain ```

Here is mine version without meaning and description. FYI you need to add /r to get yours work if you use line breaks in your translations. (.*)this\.i18n\([\s\r]*\{[\s\r\/]*value:[\s\r]*['](.)[‘`],[\s\r]id:[\s\r]’(.)'[\s\r]}[\s\r])` replaced by `$1$localize:`@@$3:$2``

I don’t think there’s a point in making i18n polyfill work with Angular v9 since @angular/localize is the official replacement. I’ll take a PR to fix the bug, but I don’t really have the time to work on this lib now…

If you need to extract from code, you can use https://github.com/loclapp/locl/tree/master/libs/cli until the official Angular cli implements it