Does not work correctly in angular9 app and IE11

[orkisz]

I have following expression:

const unicode = '\\p{L}\\p{M}\\p{N}';
const tagKeyValuePattern = `^[${unicode}0-9_=@\\(\\)\\[\\]\\{\\}\\-\\.:]([${unicode}0-9_\\s=@\\(\\)\\[\\]\\{\\}\\-\\.:]*[${unicode}0-9_=@\\(\\)\\[\\]\\{\\}\\-\\.:]){0,1}$`;
const regexp = new XRegExp(tagKeyValuePattern)

Before migrating to angular9 (from 8) below examples work seamlessly:

regexp.test('abcd'); // true
regexp.test('łąćć'); // true
regexp.test('&##!@'); // false

However, after migrating to ng9 + Ivy, all of those ceased to work and they return false in IE 11. My regexp returns true only for one-letter strings.

What is interesting, if I use XRegexp from CDN (global object) instead of NPM version all is back to normal. Looks like ng compiler harms something in the library.

It's easily reproducible, I created an example app here https://github.com/orkisz/regexp-test test -> https://github.com/orkisz/regexp-test/blob/master/src/app/app.component.ts

[josephfrazier]

What is interesting, if I use XRegexp from CDN (global object) instead of NPM version all is back to normal. Looks like ng compiler harms something in the library.

Thanks for checking the CDN version, this makes it sound like the bug is in the Angular compiler, rather than in XRegExp. I'd open an issue on the Angular repo (or follow whatever their recommended support process is) and see what they have to say about it

[orkisz]

Thanks! Please put angular issue link here so all interested parties can track it

[tscislo]

@josephfrazier exactly the same happens in our app, please let us know your findings.

[tscislo]

@josephfrazier any update on this?

[josephfrazier]

Oh, I was suggesting that @orkisz should create an Angular issue, not that I would do it myself. You could do it as well.

[bernatgy]

Just leaving this here for anyone ending up on this issue: Updating xregexp fixes the issue. For me, 4.2.4 worked like a charm in Angular 6, now after moving to Angular 9 I needed to update to 4.4.0.

Update: I also needed to modify how I import it. I had the xregexp-all.js file in angular.json / "scripts" and I've also been importing it locally to get typings:

import * as XRegExp from 'xregexp';

This doesn't work in Angular 9. Also, only importing it locally doesn't work either.

ERROR TypeError: xregexp__WEBPACK_IMPORTED_MODULE_0__ is not a function

(Even in Chrome)

Solution: Have it in angular.json / "scripts" and declare it locally via:

declare function XRegExp(pattern: string): RegExp;

PS: There's probably a better way to use the official typings, this was enough for me though.

[tscislo]

@josephfrazier @orkisz @bernatgy I can confirm that with version 4.4.0 and Angular 9.1 it works as expected on IE11 when I installed xregexp as standard npm dependency and import it like this:

import XRegExp from 'xregexp';

[josephfrazier]

Thanks for confirming, I'm going to close this for now.