Angular 9 introduced a global '$localize()' function that needs to be loaded

Question

I'm getting the following error in my new angular project setup.

ERROR Error: Uncaught (in promise): 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 add import '@angular/localize'; to your polyfills.ts file. 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.

Note: I came from the following. It suggests falling back to old version. https://github.com/angular/angular/issues/32508

What is your question, exactly? The error message gives clear instructions on what to do. — JJJ, Sep 16 '19 at 11:33

score 130 · Accepted Answer · edited Mar 07 '20 at 13:03

130

You need to make sure you have the @angular/localize package first:

npm install @angular/localize --save

Then, import '@angular/localize/init' in your polyfills.ts file just like the error says

edited Mar 07 '20 at 13:03

Saurabh Mistry

12,833
5
50
71

answered Sep 17 '19 at 04:36

rhino5oh

1,404
1
11
8

I get this error when running unit tests with Jest after adding a postinstall step for ngcc, as suggested by this answer - https://stackoverflow.com/a/63727427. @angular/localize is a dependency in my package.json, and the @angular/localize/init is an import in my polyfills.ts, but same error on most test suites. I am running Angular 9. Any suggestions on how to resolve? – plantbeard Jun 15 '21 at 18:50
2

Meh sorry just found the answer if anyone else has this issue - https://github.com/just-jeb/angular-builders/issues/678#issuecomment-755903805 – plantbeard Jun 15 '21 at 18:56
For me I needed to use the `--skip-confirmation` flag: `npm install @angular/localize --skip-confirmation --save`. Otherwise I got [an error](https://github.com/angular/angular-cli/issues/21512) "No terminal detected. '`--skip-confirmation`' can be used to bypass installation confirmation. Ensure package name is correct prior to '`--skip-confirmation`' option usage." – Nate Anderson Nov 22 '21 at 16:16

dota2pro · Answer 2 · 2020-04-16T20:53:31.753

49

The best way if you are using Angular CLI is to run

ng add @angular/localize

It will take care of it automatically

Or else

import '@angular/localize/init'; to your polyfills.ts

Tested with Angular 9

edited Apr 16 '20 at 20:53

answered Feb 10 '20 at 19:21

dota2pro

7,220
7
44
79

does it automatically add it to the package.json with 'ng add...'? – Gereon99 Aug 03 '20 at 11:44

score 14 · Answer 3 · answered Feb 13 '20 at 22:21

14

If you have many angular projects in same workspace, running ng add @angular/localize will add import statement import '@angular/localize/init' to polyfills.ts in default Project only,i think this will be fixed in later updates.

so you need to add import '@angular/localize/init' manually to polyfills.ts in other projects.

answered Feb 13 '20 at 22:21

Ahmed Abdelfattah

469
5
12

4

Underrated answer. This is never mentioned on the official guides. – Lazar Ljubenović May 19 '20 at 09:53
2

I suspect this answer may have saved my day and my sanity. – CodeMonkey Jun 03 '20 at 08:06
1

In my case also ng add didn't add it to polyfills.ts. Thanks for this. – Zuhair Feb 01 '21 at 08:12
1

This answer saved me days. My default project already had the import, so the CLI report was very misleading: "Skipping installation: Package already installed Nothing to be done." – Stewii May 08 '21 at 02:56
Is it possible to know what part/lib of my application depends on i18n? – Samiullah Khan Mar 16 '23 at 07:13

score 8 · Answer 4 · answered Sep 23 '20 at 19:19

8

This error started to appear after I upgraded a large Nx/Angular CLI application with multiple sub apps to Angular 10. The solution suggested in the error (Please run ng add @angular/localize from the Angular CLI) does not work if the application contains multiple apps. Each of these auto-generated app had its own polyfill.ts. I manually added the import (import '@angular/localize/init';) in each of the polyfill.ts file. To fix same error while running unit tests, I also had to add the import in test.ts file of libs.

answered Sep 23 '20 at 19:19

Atif Majeed

1,021
17
14

I wish this answer was higher, this was exactly the problem I had with inner libs and had to add the import in the test.ts or it won't budge. – Zentaurus Jun 05 '21 at 02:19
Thanks!!!!! This is the answer for in NX! – holyknight Aug 25 '22 at 10:49

score 6 · Answer 5 · answered Mar 23 '20 at 09:42

6

If you are running ng test and the above answer doesn't work, install the package and add

import "@angular/localize/init"

to polyfills-test.ts

answered Mar 23 '20 at 09:42

Vaishak

87
4
12

Good point here, also a setup with a specific ts file for tests. Need to be updated as well – Camille Apr 13 '21 at 10:35

score 5 · Answer 6 · answered Oct 24 '19 at 09:00

Angular 9 introduced a global $localize() function that needs to be loaded if you use i18n.

Run ng add @angular/localize from the Angular CLI.

Then make sure you have:
- @angular/localize as a dependency in your app's package.json
- import '@angular/localize/init' in your polyfills.ts

score 5 · Answer 7 · answered Dec 21 '20 at 15:24

5

You have to add this package

ng add @angular/localize

then add import '@angular/localize/init'; to your ployfills.ts

But if your tests that are failing in a library, you must add import '@angular/localize/init'; to your test.ts

answered Dec 21 '20 at 15:24

Hicham

766
7
20

Im still getting that error, Ive removed the extension and cleaned the cache and %appdata% folder too :( – Pratik Agarwal Aug 21 '21 at 06:30

score 5 · Answer 8 · answered Jan 11 '22 at 10:05

I had this error while updating Angular version from 12 to 13. I followed the instructions:

Run ng add @angular/localize
import '@angular/localize/init' in your polyfills.ts

but it did not work for me. I already had @angular/localize in my modules and the import in the polyfills.ts file, after all my Angular 12 app was working fine.

To solve the issue, I had to update the "@ng-bootstrap/ng-bootstrap" version. I hope this suggestion can save some headache to someone, given that there was no apparent link between the outdated @ng-bootstrap/ng-bootstrap version and the error description.

score 4 · Answer 9 · edited Mar 16 '21 at 12:39

4

run

npm install @angular/localize --save

Then, in your polyfills.ts

import '@angular/localize/init'

this works for me

edited Mar 16 '21 at 12:39

Syscall

19,327
10
37
52

answered Mar 16 '21 at 12:29

jayanga

95
1

score 3 · Answer 10 · edited Apr 01 '20 at 18:53

The best way to do this is by using Angular CLI:

You just have to run the following command in terminal:

ng add @angular/localize

It will automatically install packages and will also add the import statement in polyfills.ts file.

The import statement is:

import '@angular/localize/init';

If you don't want to go through the CLI approach then you can manually enter the import statement in the polyfills.ts file. Also you have to do one more step is to add the below line in package.json under dependencies tag.

"dependencies":{
    ...
    "@angular/localize":"^9.1.0",
    ...    
}

score 3 · Answer 11 · answered Jan 01 '22 at 15:32

3

For me this error appeared when running npm test so the solutions above did not help. To solve it I had to import localize in the jest.ts file. Just add:

import "@angular/localize/init";

answered Jan 01 '22 at 15:32

Eduard Frankford

151
9

Anshita Singh · Answer 12 · 2020-01-14T07:52:28.897

2

As the i18n attributes are now converted to $localize calls in the generated code, we need to load the $localize function.

The CLI offers a schematic to do this for you. Simply run: ng add @angular/localize

It will add the package to your dependencies and the necessary import to your polyfills (import '@angular/localize/init')

You can also refer to the following link for more explanation. https://blog.ninja-squad.com/2019/12/10/angular-localize/

edited Jan 14 '20 at 07:52

answered Jan 14 '20 at 06:55

Anshita Singh

1,583
1
17
40

2

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – THess Jan 14 '20 at 07:16
@THess thanks for the suggestion, I have updated the answer and shared the link for reference. – Anshita Singh Jan 14 '20 at 07:48

score 2 · Answer 13 · answered Jul 20 '21 at 08:45

I changed my operating system because of this problem. And yesterday I found the cause of this problem. I was getting this issue due to a plugin I installed in Visual Studio Code. If you are using Angular9, do not install the first two plugins. You can install the third one.

score 0 · Answer 14 · answered Jun 13 '22 at 13:49

0

replace this in polyfil:

import '../node_modules/@angular/localize/init';

with this :

import '@angular/localize/init';

and everything is OK !

answered Jun 13 '22 at 13:49

Milad Jafari

970
10
15

score 0 · Answer 15 · answered Feb 11 '23 at 12:22

0

This error message may appear as well when you are switching to a different i18n library and have not cleaned up the project properly, such as removing all the occurrences of i18n in case you used the default @angular/localize package.

answered Feb 11 '23 at 12:22

roxhens

508
6
22

score 0 · Answer 16 · answered May 15 '23 at 14:33

I had the import '@angular/localize/init'; on the polyfill.ts file but the error was somewhere else! I Just drop it here in case it helps someone!

I have a .browserlistrc file on my project and the set of rules just broke Angular i18n. In my case, i had to remove the >0.3% from the list in order to get it working!

Have a nice day!

Liubomyr Siusar · Answer 17 · 2023-05-18T08:04:19.630

So, in my case I try to use @ng-bootstrap/ng-bootstrap for Angular v15.

After long investigation, I created new project with Angular v14:

npx -p @angular/cli@14.2.0 new hello-world

and install

@ng-bootstrap/ng-bootstrap

And I worked!

So, I created polyfills.ts in root /src folder.

Then update angular.json:

projects/architect/build/polyfills: ["zone.js", "src/polyfills.ts"],

and

projects/architect/test/polyfills: ["zone.js", "zone.js/testing", "src/polyfills.ts"],

in tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "node"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts" <- add this
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

the same in tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine",
      "@angular/localize"
    ]
  },
  "files": [
    "src/polyfills.ts" <- add this
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

score 0 · Answer 18 · answered Jul 25 '23 at 10:42

0

If you are using Angular Universal(SSR) then just add import '@angular/localize/init'; on line 1. in server.ts file

That's it.

answered Jul 25 '23 at 10:42

KARNAV PARGI

445
1
4
15

Angular 9 introduced a global '$localize()' function that needs to be loaded

18 Answers18