Angular CLI incorrectly loads jasmine-core as an ES module

Offen
#31,470 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
angular, typescript
Bereich
testing-qa, tooling

Rechercherichtung

Beginne mit dem Angular CLI-Karma-Polyfill unter packages/angular/build/src/builders/karma/polyfills/jasmine_global.js und den durch Pull Request 29104 eingeführten Änderungen. Reproduziere das Problem mit den angegebenen ng new- und npm t-Schritten und untersuche dann das generierte jasmine.js-Script-Tag. Das Ziel ist erreicht, wenn jasmine-core nicht mehr als ES-Modul geladen wird und der bestehende Karma-Testablauf weiterhin funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: @angular/build devkit/build-angular:karma freq1: low severity3: broken type: bug/fix
Command

new, 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

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 <script type="module">. 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. 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, 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 --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

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


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

Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
16 Std. 35 Min.
Gemergte PRs (30 T.)
176

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angular-cli

Alle Issues in angular/angular-cli

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.