angular / angular/angular-cli

Angular CLI incorrectly loads jasmine-core as an ES module

Đang mở
#31,470 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: @angular/build devkit/build-angular:karma freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với polyfill Karma của Angular CLI tại packages/angular/build/src/builders/karma/polyfills/jasmine_global.js và các thay đổi được giới thiệu trong pull request 29104. Tái hiện sự cố bằng các bước ng new và npm t được liệt kê, sau đó kiểm tra thẻ script jasmine.js được tạo. Hoàn thành khi jasmine-core không còn được tải dưới dạng mô-đun ES và luồng kiểm thử Karma hiện có vẫn hoạt động.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
testing-qa, tooling
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.