Development with ng serve gets "stuck" with $localize error when using i18n attributes and localize option set to sourceLocale

[reifi]

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

localize, Don't known / other

Is this a regression?

Yes

Description

Calling ng serve with a configuration that uses the "localize" option set to the sourceLocale (mine is 'de-AT'),
for example ng serve --browserTarget=my-app:build:development,locale-de-at
will lead to a false $localize error message and forces you to delete .angular cache and restart ng serve.

Worked in v13.0.3 but will only show incorrect error message during development in v13.1.0+

Please provide a link to a minimal reproduction of the bug

https://gist.github.com/reifi/a7528447fb5aca26b34097d2ef03f46f

Please provide the exception or error you saw

ERROR Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
    localize Angular
    consts app.component.html:4
    Angular 18

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

Angular CLI: 13.1.2
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.4.4

Anything else?

After updating to from angular v13.0.3 to v13.1.1 the $localize error appeared every time I accidentally made a mistake during development with ng serve and did not go away until I deleted the .angular directory and restarted ng serve.

I was able to reproduce it with a newly generated app I updated to v13.1.1.
https://gist.github.com/reifi/a7528447fb5aca26b34097d2ef03f46f

• Add i18n @angular/localize to newly generated app (I upgraded from 13.0.3 to 13.1.1)
  • configure i18n with localize profiles in angular.json

      "i18n": {
        "locales": {
          "it": {
            "translation": "messages.it.xlf"
          }
        },
        "sourceLocale": {
          "code": "de-AT"
        }
      },
      ...
     "configurations": {
            "locale-it": {
              "localize": [
                "it"
              ]
            },
            "locale-de-at": {
              "localize": [
                "de-AT"
              ]
            }
     },....
  

  • add some tag with i18n attribute or use this app.component.html

• Start development with ng serve --browserTarget=my-app:build:development,locale-de-at
• Change something that leads to an error in app.component.html and save it so error will be shown in browser
• Change it back and fix error -> $localize error will be shown in console and can only be fixed by deleting .angular directory.

Using ng serve --browserTarget=my-app:build:development,locale-it (using localize 'it') works, probably because it's not the sourceLocale.

Workaround:

Using ng serve --browserTarget=my-app:build:development,locale-de-at (using localize 'de-AT') does not work, but omitting the 'localize' option like ng serve --browserTarget=my-app:build:development does - although probably ignoring additional configuration like baseHref in i18n.

Found differences in cache

The cached content in .angular/cache/babel-dev-server-i18n/ will change from (for example)

... else {\n      i18n_0 = \"Unter dieser Url ist noch kein websms Partner aktiv\";\n    } 

to

... else {\n      i18n_0 = $localize`:@@view.not_found.paragraph.reseller_not_found:Unter dieser Url ist noch kein websms Partner aktiv`;

which leads to the error because "$localize" is not needed during runtime

[Joren-Thijs-KasparSolutions]

I am facing the same issue after updating Angular from V11 to the latest V13.

[Joren-Thijs-KasparSolutions]

Trying the obvious to disable the cache as per the documentation does not fix the issue

https://angular.io/cli/cache#enabling-and-disabling-the-cache

[alan-agius4]

@reifi,

I wasn't able to reproduce the issue using the provided steps

➜  my-app ng serve  --browserTarget=my-app:build:development,locale-de-at
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.95 MB |
polyfills.js          | polyfills     | 339.87 kB |
styles.css, styles.js | styles        | 212.85 kB |
main.js               | main          |   8.15 kB |
runtime.js            | runtime       |   6.85 kB |

                      | Initial Total |   2.50 MB

Build at: 2022-01-10T10:09:52.833Z - Hash: cfc167436488072b - Time: 8570ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
main.js             | main    |  8.30 kB |
runtime.js          | runtime |  6.85 kB |

3 unchanged chunks

Build at: 2022-01-10T10:09:53.486Z - Hash: a92f761eb1d3a40a - Time: 347ms

Error: src/app/app.component.html:9:1 - error NG8001: 'uncomment-save-and-comment-save' is not a known element:
1. If 'uncomment-save-and-comment-save' is an Angular component, then verify that it is part of this module.
2. If 'uncomment-save-and-comment-save' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

9 <uncomment-save-and-comment-save></uncomment-save-and-comment-save>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




✖ Failed to compile.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
main.js             | main    |  8.20 kB |
runtime.js          | runtime |  6.85 kB |

3 unchanged chunks

Build at: 2022-01-10T10:09:59.503Z - Hash: 3e3adaf1c77e6b12 - Time: 133ms

✔ Compiled successfully.

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[reifi]

This is the newly created app I used for my step by step descripton:
https://github.com/reifi/my-app

https://gist.github.com/reifi/a7528447fb5aca26b34097d2ef03f46f#file-screenshot-2022-01-10-135502-png