ng extract-i18n: Cannot create property 'message' on string error -> depends on -browserlistrc configuration

[meriturva]

🐞 Bug report

Command (mark with an x)

• extract-i18n

Description

Clone repo: https://github.com/meriturva/ng14_i18n_browserlist and run the command npm run extract you will see the error:

TypeError: Cannot create property 'message' on string 'dist\test\lib\fesm2020\test-lib.mjs: Unexpected messageParts for `$localize` (expected an array of strings).
   8 | class LibModule {
   9 |   static forRoot() {
> 10 |     const dddd2 = $localize(_t || (_t = _`:Message defined placeholder:Message not present`));
     |                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  11 |     console.log("sssss", dddd2);
  12 |     return {
  13 |       ngModule: LibModule,'
    at run (xxx\node_modules\@angular\localize\node_modules\@babel\core\lib\transformation\index.js:39:15)
    at run.next (<anonymous>)
    at transform (xxx\node_modules\@angular\localize\node_modules\@babel\core\lib\transform.js:25:41)
    at transform.next (<anonymous>)
    at evaluateSync (xxx\node_modules\gensync\index.js:251:28)
    at sync (xxx\node_modules\gensync\index.js:89:14)
    at MessageExtractor.extractMessages (file:///D:/Projects/daButtare/test_i18n_ng14/node_modules/@angular/localize/tools/bundles/chunk-CWHUJIHG.js:122:7)
    at extract (xxx\node_modules\@angular-devkit\build-angular\src\builders\extract-i18n\ivy-extract-loader.js:123:32)

Basically, if you comment not dead from .browserlistrc file everything works correctly.
https://github.com/meriturva/ng14_i18n_browserlist/blob/master/.browserslistrc#L13

I think the extract phase of i18n strings has not to depend on the customer .browserlistrc file.
It is better to build a project during extraction in a fixed configuration that makes tools work correctly.

🌍 Your Environment

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


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

Angular: 14.0.3
... animations, common, compiler, compiler-cli, core, forms
... localize, 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
@angular/cli                    14.0.2
@schematics/angular             14.0.2
ng-packagr                      14.0.2
rxjs                            7.5.5
typescript                      4.7.4

[alan-agius4]

Hi @meriturva,

I do agree that extraction shouldn't depend on the browserslist configuration.

That said, it's important to point out that by enabling the not dead option in the browserslist configuration you are enabling browsers that Angular does not support.

[meriturva]

Hi @alan-agius4 you are right, we are going to remove not dead on our configuration but main point is that extraction phase has to ignore browser list configuration.

Thanks!