angular / angular/angular-cli

Angular CLI incorrectly loads jasmine-core as an ES module

未关闭
#31,470 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: @angular/build devkit/build-angular:karma freq1: low severity3: broken type: bug/fix
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

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

贡献指南

打开贡献指南

调研方向

从 packages/angular/build/src/builders/karma/polyfills/jasmine_global.js 中的 Angular CLI Karma polyfill,以及 pull request 29104 引入的更改开始。按照列出的 ng new 和 npm t 步骤重现问题,然后检查生成的 jasmine.js script 标签。完成标准是 jasmine-core 不再作为 ES 模块加载,并且现有的 Karma 测试流程仍可正常运行。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
testing-qa, tooling
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。