angular-cli icon indicating copy to clipboard operation
angular-cli copied to clipboard

web/test-runner failing when zoneless

Open cyrilletuzi opened this issue 9 months ago • 5 comments

Command

test

Is this a regression?

  • [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

@angular-devkit/build-angular:web-test-runner is loading files from zone.js/testing even when in zoneless mode, thus resulting in ng test command failing.

Minimal Reproduction

  • ng new (with CLI 18.0.1)
  • ng test => OK
  • npm install @web/test-runner -D
  • replace @angular-devkit/build-angular:karma by @angular-devkit/build-angular:web-test-runner in angular.json
  • ng test => OK
  • now go zoneless:
    • replace provideZoneChangeDetection({ eventCoalescing: true }) by provideExperimentalZonelessChangeDetection() in src/app/app.config.ts
    • add providers: [provideExperimentalZonelessChangeDetection()] in configureTestingModule in src/app/app.component.spec.ts
    • delete polyfills properties (both in build and test) in angular.json
    • optionally npm rm zone.js but is is not required for reproduction
  • ng test => FAIL after the timeout (error below)
  • add back polyfills properties (in test) in angular.json (and npm install zone.js if you removed it)
  • ng test => OK but now there are warnings:
NG0914: The application is using zoneless change detection, but is still loading Zone.js.Consider removing Zone.js to get the full benefits of zoneless. In applcations using the Angular CLI, Zone.js is typically included in the "polyfills" section of the angular.json file.

Reproduction repository here. The repo is in the error case. You can uncomment polyfills in angular.json to see the working scenario.

Exception or Error

dist/test-out/browser/app.component.spec.js:

 🚧 404 network requests:
    - testing.js

 ❌ Browser tests did not start after 20000ms You can increase this timeout with the testsStartTimeout option. Check the browser logs or open the browser in debug mode for more information. 

Chrome: |██████████████████████████████| 1/1 test files | 0 passed, 0 failed

Error while running tests.

Your Environment

Angular CLI: 18.0.1
Node: 20.13.1
Package Manager: npm 10.8.0
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.1
@angular-devkit/build-angular   18.0.1
@angular-devkit/core            18.0.1
@angular-devkit/schematics      18.0.1
@angular/cli                    18.0.1
@schematics/angular             18.0.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else relevant?

Pull Request which implemented @web/test-runner builder.

The missing testing.js from the error seems to come from this line.

The line which links it to zone.js/testing seems to be here.

What is strange is that this last file seems to have some behaviors to detect zone or zoneless, but it seems ineffective in the end, probably because of the import in the first file, which is always here.

cyrilletuzi avatar May 23 '24 19:05 cyrilletuzi