Nested angular localize calls produces invalid code

This issue has been tracked since 2022-09-07.

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

compiler, localize

Is this a regression?

No

Description

Nested localize calls production invalid i18n bundles. For example:

$localize`:@@login-form-components--lock-timeout-sec:Account locked. Try again in ${this.pluralizeTimeout(4, $localize`:@@login-form-components--lock-timeout-sec-single:second`,$localize`:@@login-form-components--lock-timeout-sec-plural:seconds`)}:accountLockTimeoutSec:.`

Will compile into:

"Account locked. Try again in " + this.pluralizeTimeout(4, $localize`:@@login-form-components--lock-timeout-sec-single:second`, $localize`:@@login-form-components--lock-timeout-sec-plural:seconds`) + ".""second""seconds";

Which will throw an error at runtime as ".""second""seconds"; isn't valid JS code.

To reproduce:

git clone https://github.com/mattlewis92/angular-localize-bug.git
cd angular-localize-bug
npm i
npm start

Then observe the browser console throwing a syntax error exception.

Please provide a link to a minimal reproduction of the bug

https://github.com/mattlewis92/angular-localize-bug

Please provide the exception or error you saw

Uncaught SyntaxError: Unexpected string


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

```true
Angular CLI: 14.2.1
Node: 16.16.0
Package Manager: npm 6.14.17 
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1
@angular-devkit/build-angular   14.2.1
@angular-devkit/core            14.2.1
@angular-devkit/schematics      14.2.1
@angular/cli                    14.2.1
@schematics/angular             14.2.1
rxjs                            7.5.6
typescript                      4.7.4

Anything else?

No response

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84147
Watcher Count 3063
Fork Count 22247
Issue Count 1201

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date