Angular 9 i18n migration - failing tests

Question

I am upgrading from Angular 8.0 to Angular 9.1.1. With a little bit of work, everything builds and runs fine. I ran into the localization issue https://angular.io/guide/migration-localize and followed these instructions - this allowed my project to build and run! However, I am still getting this issue when I run tests (karma/jasmine)

I used the CLI to upgrade my project. I can't seem to find any other required steps to migrate localization.

I am using TestBed for the unit tests and they fail when calling TestBed.createComponent, throwing the 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.)

An example piece of HTML from a failing tests component template is:

<span i18n>
    label
</span>

Simply removing i18n allows the tests to run and pass - but this is not a runtime error when the app runs. Any clues on where to look next or what else might be involved here?

The top of my polypill.js

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

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
...

my package.json dependencies

  "dependencies": {
    "@angular/animations": "^9.1.1",
    "@angular/common": "^9.1.1",
    "@angular/compiler": "^9.1.1",
    "@angular/core": "^9.1.1",
    "@angular/forms": "^9.1.1",
    "@angular/localize": "^9.1.1",
    "@angular/platform-browser": "^9.1.1",
    "@angular/platform-browser-dynamic": "^9.1.1",
    "@angular/router": "^9.1.1",
    "core-js": "^3.0.0",
    "moment": "^2.24.0",
    "prismjs": "^1.16.0",
    "rxjs": "~6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular-devkit/build-ng-packagr": "~0.901.1",
    "@angular/cli": "^9.1.1",
    "@angular/compiler-cli": "^9.1.1",
    "@angular/language-service": "^9.1.1",
    "@types/jasmine": "^3.3.13",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "^2.0.0",
    "karma-jasmine-html-reporter": "^1.4.2",
    "ng-packagr": "^9.0.0",
    "ts-node": "^8.2.0",
    "tslint": "^5.18.0",
    "typescript": "~3.8.3"
  }

Comestible

looks like polyfill.js is not loading with karma, adding the direct import import '@angular/localize/init'; to an isolated test allows it to pass – Comestible

Answer 1

The polyfill was not included in the test, so I had to add the polyfil configuration option in angular.json

  "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": "polyfills.ts",
            ...
          }
        },

and make sure it was included in the tsconfig.spec.json

"include": [
    "**/*.spec.ts",
    "**/*.d.ts",
    "polyfills.ts"
  ]

Comestible

Answer 2

I found that I had to import @angular/localize/init into test.ts to allow tests to run, see here for an example.

Ulphi

I can do that too, but then I'm adding an import to production components to satisfy a testing requirement that already exist in a production environment. what I need to do is get my polyfill included in my tests, as far as I can tell – Comestible

The only solution that works for me. In my special case, I had the test in a separate library. Thanks! – Exposition

I've been struggling to run tests on my angular library and after several hours this seems to be the only fix that worked! Thanks! – Vinavinaceous

Answer 3

I received errors in unit tests after upgrading a large Nx/Angular CLI application from Angular 8 to Angular 10. An excerpt of the sample error follows

  An error was thrown in afterAll
  Uncaught 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

The solution in the error description does not fix the issue with the test failures. The libs in the application that were generated through Angular CLI did not have any polyfill.ts file. All these libraries had a file test.ts generated by Angular CLI (e.g. mproject\libs\mylib\src\test.ts). I added the import statements (import '@angular/localize/init';) in test.ts files of these libs to resolve this issue.

Fadden

Answer 4

This works for me on Angular 16. Go to angular.json and change this:

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "tsConfig": "projects/transaction-search/tsconfig.spec.json",
    "polyfills": ["zone.js", "zone.js/testing", "@angular/localize/init"] // <-- Include "@angular/localize/init" here 
  }
},

For more information, if you have multiple packages locally hosted inside of your projects file, you will have to do the same for each package. In my situation, even if one of my packages didn't use i18n, the i18n error message was still showing up.

Helgahelge