angular / angular/angular-cli

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

Open
#24,778 0 comments 0 reactions 0 assignees View on GitHub
area: @angular-devkit/build-angular devkit/build-angular:karma freq1: low severity5: regression type: bug/fix
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

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

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue from the linked repository with `npm run test:chrome` and `npm run test:jsdom`, then inspect the Angular CLI `test` command and its JavaScript bundle loading. Done means jsdom tests run without the patch while Chrome tests continue to pass, with a way to add or omit `type="module"`.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
cli, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.