angular / angular/angular-cli

Angular CLI 15.1.4 breaks ng test with jsdom because CLI is loading JavaScript bundles as module

オープン
#24,778 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: @angular-devkit/build-angular devkit/build-angular:karma freq1: low severity5: regression type: bug/fix
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### Command

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

15.1.3

### Description

I have a standard Angular project, using Karma & Jasmine for unit tests. The unit tests run can run in either Chrome or jsdom. I need jsdom because my CI environment doesn't have Chrome (org policy: no browsers on servers).

Angular CLI 15.1.4 introduced a change in https://github.com/angular/angular-cli/pull/24620 wherein Javascript bundles are loaded as modules.

Unfortunately, jsdom doesn't support ; it simply doesn't load the module scripts. This is a known issue in jsdom - https://github.com/jsdom/jsdom/issues/2475

Ideally jsdom would add module support; but since that ticket has been open for four years, I'm not holding out much hope. So instead, here's my request:

**REQUEST:** Could Angular CLI add a flag to add/omit type="module" ?

My workaround for now is patching jsdom (using patch-package) to ignore the type attribute on <script type="module">.

### Minimal Reproduction

Clone my git repo: https://github.com/andrewpmontgomery/angular-15-jsdom
1. Run `npm install`
2. Run `npm run test:chrome` and all three tests should pass.
3. Run `npm run test:jsdom` and it should time-out.
4. Run `npm run patch-package`
5. Run `npm run test:jsdom` again and now it works.

### Exception or Error

_No response_

### Your Environment

```text
Angular CLI: 15.2.0
Node: 16.19.1
Package Manager: npm 8.19.3
OS: win32 x64

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

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.0
@angular-devkit/build-angular 15.2.0
@angular-devkit/core 15.2.0
@angular-devkit/schematics 15.2.0
@schematics/angular 15.2.0
rxjs 7.8.0
typescript 4.9.5
```

### Anything else relevant?

_No response_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされたリポジトリの問題を `npm run test:chrome` と `npm run test:jsdom` で再現し、その後 Angular CLI の `test` コマンドと JavaScript バンドルの読み込みを調査します。jsdom テストがパッチなしで実行され、Chrome テストが引き続きパスし、`type="module"` を追加または省略できる方法があれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
cli, testing
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。