ng test fails in angular 9

[debender495]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

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

Description

A clear and concise description of the problem...

This issue complains about below in the polyfills.ts

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

This is added after running the command ng add "@angular/localize"

Seems like it cannot find this import of the polyfills when I run, ng test. is there a way or options that can be added in the command to provide this localize configuration explicitly.

🔬 Minimal Reproduction

Simple steps to reproduce this bug.
below is the configuration , I am having after the the upgrade to angular 9.

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "skipLibCheck": true
  }
}

🔥 Exception or Error

core.js:47866 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.
For server-side rendering applications add the import to your `main.server.ts` file.)
    at core.js:47866
    at Module../node_modules/@ng-bootstrap/ng-bootstrap/__ivy_ngcc__/fesm2015/ng-bootstrap.js (ng-bootstrap.js:69)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/core/component/gear-error/gear-error-modal-content/gear-error-modal-content.component.ts (gear-error-modal-content.component.spec.ts:73)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/core/component/gear-error/gear-error-modal-content/gear-error-modal-content.component.spec.ts (main.js:3730)
    at __webpack_require__ (bootstrap:79)
    at webpackContext (src sync \.spec\.ts$:232)
    at Array.map (<anonymous>)
    at Module../src/test.ts (test.ts:20)-->

🌍 Your Environment

$ ng version

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


Angular CLI: 9.0.5
Node: 10.16.0
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@angular/cdk                      9.1.1
@angular/localize                 9.0.6
@angular/material                 9.1.1
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[debender495]

Hi @alan-agius4 , can you please let me know if you need any missing information. it complains about the below error in core.js, which is kinda nonsense, as I have done already, about what the error is saying. for e.g. I ran ng add @angular/localize already, the import is there in the polyfills.ts, but somehow while running the ng test, it goes doen to the ng bootstrap lib which uses and i18n, then all my application specific test fails, because it throws below error.

core.js:47866 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.

[petebacondarwin]

@debender495 - the issue was closed because you did not provide a way for use to reproduce the error. Just pasting the error message gives us very little to get started with in order to debug the issue.
At the very least you should explicitly lay out the commands you ran and the output from those before hitting the error. Providing us with a repository link containing a minimal reproduction that demonstrates the problem would be ideal and would probably allow us to quickly identify the problem.

---

I note from the error log that this is being thrown inside a 3rd party library (ng-bootstrap) which has been compiled by ngcc. I guess/believe that this library contains components that use i18n tags in their templates. Ngcc will compile those templates to ivy code, which will include calls to $localize.

Now, ng build and ng serve will do compile time inlining of $localize calls in the application bundle (e.g. main.js) which will process and remove these calls (even in 3rd party libraries).

But from the look of the error stack, I wonder if ng test does not do compile time inlining? This would result in those not being processed and removed?

[petebacondarwin]

I did the following and was not able to reproduce your error:

ng new test-repo
ng add @ng-bootstrap/ng-bootstrap

I then added the ng-bootstrap calendar component (which uses i18n) to the AppComponent:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbDatepickerModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbDatepickerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<ngb-datepicker></ngb-datepicker>

Running ng serve does provide the runtime error about needing to install @angular/localize in the console. So now I add that:

ng add @angular/localize

Now running ng serve and ng test complete without this error.

[petebacondarwin]

Here is my reproduction: https://github.com/petebacondarwin/ng-boostrap-test-angular-cli-issue-17235

[alan-agius4]

@petebacondarwin, thanks for looking into this and putting up a repro.

@debender495, the issue was closed because indeed you didn’t provide any enough information for us to take action. At the time that this issue was closed the issue template was blank.

[alan-agius4]

Hi @debender495, can you please update the reproduction provided above by @petebacondarwin (#17235 (comment)) and show case the error that you are experiencing?

Unfortunately, we still can't reproduce the problem.

Thanks.

[debender495]

Thank you for the response, I am cheking at my end, and trying to check/compare with the repo shared by @petebacondarwin. i will update shortly, kindly do not close this immediately,

Rg,
Debender

[debender495]

Dear @alan-agius4 and @petebacondarwin ,
After comparing, I found the difference in devDependencies in my project using older version of karma and jasmine dependencies, after upgrading like your example the issue was gone.

@alan-agius4 Please close the issue

Thank you guys,

[petebacondarwin]

Glad you are back up and running!

[debender495]

Well, for any future visitors to this issue, my project configuration is,

I had seperate tsconfig files for
1)app
tsconfig.app.json
with,
"files": [
"test.ts",
"polyfills.ts"
],
2)spec
tsconfig.spec.json
with,
"files": [
"test.ts",
"polyfills.headless.ts"
],
So we need to follow $localize Global Import Migration guide and
After I ran the command ng add @angular/localize from the Angular CLI

the schematic adds an import statement for @angular/localize to polyfills.ts that will look something like this:

content_copy
/******************************************************************

• Load $localize - used if i18n tags appear in Angular templates.
  */
  import '@angular/localize/init';
  It also lists @angular/localize as a dependency in your app's package.json to ensure the import is found.

content_copy
"dependencies": {
...
"@angular/localize": "...",
...
}

but not in the polyfills.headless.ts as mentioned in my tsconfig.spec.json file, This is configured in angular.json in the test section

==
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.headless.ts",
"tsConfig": "src/tsconfig.spec.json",

So for this configuration I had to manually add below in polyfills.headless.ts

/******************************************************************

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

cheers!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}