v9: ng add @angular/localize doesn't fix error

[julkue]

🐞 bug report

Affected Package

The issue is caused by package @angular/localize

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular v8

Description

After running ng update @angular/core @angular/cli on an Angular v8 application the ng serve command ran without errors, but I've seen the following error in the browser console

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)

as described in the migration guide.

Therefore I've executed ng add @angular/localize like described. But:

1. This only adds the package @angular/localize to package.json, but doesn't add the import statement

/******************************************************************
 * Load `$localize` - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';

2. Even when manually adding the above mentioned import statement to the polyfills.ts file the error isn't fixed - even after restarting ng serve. I'm still seeing the issue and don't know to resolve it, since I've followed the migration guide.

🔥 Exception or Error

🌍 Your Environment

Angular Version before updating:

Angular CLI: 8.3.23
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2

Angular Version after updating:

Angular CLI: 9.0.1
Node: 12.13.1
OS: win32 x64

Angular: 9.0.0
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[wartab]

I had the same issue, I had to run it twice for it to add it.

[julkue]

@wardbell Thanks for answering. But was the issue resolved for you, once the import statement was available? Because as mentioned in the description, for me it's not resolved even when adding it manually.

[AndrewKushnir]

Hi @julmot, thanks for reporting the issue. Could you please provide a small repro (in a form of Github repo), so that we can perform further investigation? Thank you.

[julkue]

@andreaswissel Thanks for your reply.

Luckily I could indeed reproduce it in a minimal repo. I've removed everything that is unnecessary from a real life application where I've encountered the issue. There might be some fragments in the angular.json file that are unnecessary for this issue, but I thought it might be helpful to share the entire file.

Please head over to the following repository:

https://github.com/julmot/angular-localize-error

NOTE: As you can see in the 4 available commits I've created one commit for:

• The initial setup of the project
• The upgrade to Angular v9 using ng update @angular/core @angular/cli
• The installation of @angular/localize using ng add @angular/localize
• Manual adding the import statement

As you can see in the 3rd commit, the import statement is not generated automatically. And even with manually adding the import statement – it's still resulting in the same error in the browser console.

Run $ npm start after $ npm install and head over to the browser console to see the error.

[petebacondarwin]

So the problem is that when you specify a specific locale for a CLI build it will actually replace the @angular/localize/init file with a new file called empty.js. This is because "normally" you will be building with aot: true and then running the compile time translation of $localize calls, which means that there will be no run-time calls to $localizeleft in the code. (In that case the@angular/localize/init` is redundant and so not needed, which is why it is replaced to ensure it is not added unnecessarily to the bundle).

You can see this by stepping into the code and looking at polyfills.js file, which contains the following:

/* harmony import */ var _angular_localize_init__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/localize/init */ "./node_modules/@angular-devkit/build-angular/src/utils/empty.js");
/* harmony import */ var _angular_localize_init__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_localize_init__WEBPACK_IMPORTED_MODULE_1__);

I think the correct solution to this issue is for the CLI to avoid replacing the @angular/localize/init with empty.js if the build is not using AOT? What do you think @clydin? In the meantime, I am transferring to the CLI repo as this is not a framework issue.