angular / angular/angular-cli

Angular CLI incorrectly loads jasmine-core as an ES module

Aperta
#31,470 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: @angular/build devkit/build-angular:karma freq1: low severity3: broken type: bug/fix
Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
14h 23m
PR unite (30g)
162

Descrizione

### Command

new, test

### Is this a regression?

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

### The previous version in which this bug was not present was

Likely 19.0.x

### Description

Note: I maintain Jasmine.

jasmine-core is a plain old script/CommonJS hybrid, not an ES module, but the Angular dev tools load it via ``. That appears to be the cause of the global `this` problems that [the angular CLI works around by monkey patching the window object to look like it's from an old version of the GJS runtime](https://github.com/angular/angular-cli/blob/ba18bcc9ef00e1da31cabbb7845bbcdb5cfef565/packages/angular/build/src/builders/karma/polyfills/jasmine_global.js#L15-L17). It could cause other problems as well.

https://github.com/angular/angular-cli/pull/29104 appears to have introduced both the bug and the GJS workaround.

jasmine-core 6.x will use `globalThis` to find the global object, which should do away with the need for the GJS workaround. But it will also [emit a warning if it's loaded as an ES module in the browser](https://github.com/jasmine/jasmine/commit/b881b0077d07239ed75ca150d38e3fd2060a64ee), since that's an unsupported and un-tested configuration that's already known to have caused problems.

### Minimal Reproduction

1. Run `ng new` and accept the defaults. (I used @angular/cli 20.3.5.)
2. In the created project, run `npm t`.
3. Click the debug button in Karma.
4. View source in the resulting tab.
5. Look for the script tag that loads jasmine.js.

If you want to see the warning:

1. Run `ng new` and select the zoneless option. This isn't strictly necessary but it will avoid errors related to jasmine/jasmine#2078.
2. Patch package.json as shown below.
3. Remove package-lock.json and node_modules.
4. Run `npm install`.
5. Run `npm t`.

```diff
diff --git a/package.json b/package.json
index 0474f8f..2fff3a9 100644
--- a/package.json
+++ b/package.json
@@ -37,12 +37,20 @@
"@angular/cli": "^20.3.5",
"@angular/compiler-cli": "^20.3.0",
"@types/jasmine": "~5.1.0",
- "jasmine-core": "~5.9.0",
+ "jasmine-core": "github:jasmine/jasmine#6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.9.2"
+ },
+ "overrides": {
+ "karma-jasmine": {
+ "jasmine-core": "6.0.0-alpha.0"
+ },
+ "karma-jasmine-html-reporter": {
+ "jasmine-core": "6.0.0-alpha.0"
+ }
}
-}
\ No newline at end of file
+}
```

### Exception or Error

```text

```

### Your Environment

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

Angular CLI: 20.3.5
Node: 20.19.0
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 20.3.4
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package Version
------------------------------------
@angular-devkit/architect 0.2003.5
@angular-devkit/core 20.3.5
@angular-devkit/schematics 20.3.5
@angular/build 20.3.5
@angular/cli 20.3.5
@schematics/angular 20.3.5
rxjs 7.8.2
typescript 5.9.3
zone.js 0.15.1
```

### Anything else relevant?

_No response_

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con il polyfill Karma di Angular CLI in packages/angular/build/src/builders/karma/polyfills/jasmine_global.js e le modifiche introdotte dalla pull request 29104. Riproduci il problema con i passaggi ng new e npm t indicati, quindi esamina il tag script jasmine.js generato. Il lavoro è completato quando jasmine-core non viene più caricato come modulo ES e il flusso di test Karma esistente continua a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
testing-qa, tooling
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.