[Question] ESM Angular issues

[i23591326]

Hi! I have some questions:

1. Is there any way I could enable ESM build for Playwright without using "type": "module" in package.json?
2. Is there any way to preserve older code without ".ts" endings and type-only Imports?
3. Are there are any plans about supporting Playwright test runner on top of ts-node if it could help?

Context:
I'm using Playwright test runner with Angular Component Harnesses 12th version.
I have to update Angular, however starting from version 13 Angular no longer provide CommonJS modules (CJS), only ECMAScript (ESM) modules, so it seems I have no options other than use experimental TypeScript + ESM mode if I want to stick to Playwright test runner.
I managed to update a small part of my code by adding ".ts" endings to imports, type-only Imports and write one small working test with "type": "module" in package.json just to check if it's possible.

However this approach has following problems:

• "type": "module" in package.json brakes other part of the project which uses default Angular Karma setup with ns-node that resolves all the conflicts between CJS and ESM
• the amount of code that has to be rewritten is quite significant as for years we used to write a lot of harnesses and integration tests that runs on karma and ts-node, and only recently started writing e2e tests with Playwright and Babel
• IDEA does not support .ts endings and does not encourage type-only Imports, so the developer experience would significantly degrade

[rwoll]

1. Is there any way I could enable ESM build for Playwright without using "type": "module" in package.json?

Mostly no. See

playwright/packages/playwright-test/src/loader.ts

Line 666 in 7c4099a

export function fileIsModule(file: string): boolean {

for the module detection logic.

2. Is there any way to preserve older code without ".ts" endings and type-only Imports?

Not in ESM mode. See below.

3. Are there are any plans about supporting Playwright test runner on top of ts-node if it could help?

See https://playwright.dev/docs/test-typescript#manually-compile-tests-with-typescript. You can choose to compile your code explicitly instead of using Playwright to do it. Playwright is unlikely to directly integrate with ts-node, but I think ts-node essentially just combines the compile and run steps of your source, so you can achieve the same end result today.

Based on the original description of the issue, given the number of tools involved in your project and mixture of constraints, you may have to perform your own compilation step.

[rwoll]

Closing per above, but please re-open if you have further questions or re-file and reference this issue. If you hit errors, please include a minimal repro (i.e. a repo we can clone, download and run to observe the issue directly). However, given the number of tools involved, we may be of limited help, so reaching out to the community who might be using these tools in combination with eachother in the Community Slack or Discussions maybe be a better option.

Thanks!

[i23591326]

For someone facing similar problem we managed to fix e2e in our case:

1. We used tsc to build whole project with test scenarios and all the test utilities including component harnesses.
2. We used tsc-alias and tsc-esm-fix packages to post-process that build.
3. We patched global NodeJS object in order Angular 13, 14 not to throw an error, because (I believe by the mistake) it is a part of exports of some material components harnesses modules, which at the moment leads to fail.

Last one worth more details as I didn't managed to google it easily:
When anything from Angular internals such as @component decorator get into the playwright runtime in NodeJS it fails tests with error JIT compilation failed for injectable [class PlatformLocation] or similar depending on your Angular version. It happens for example if you import MatDialogHarness, but not if you import MatTableHarness or most of the others harnesses.
So in playwright.config.ts we added following lines.

globalThis.ng = {
  ɵcompilerFacade: {
    compileFactoryDeclaration: () => undefined,
    compileInjectableDeclaration: () => undefined,
    compileDirectiveDeclaration: () => undefined,
    compilePipeDeclaration: () => undefined,
    compileNgModuleDeclaration: () => undefined,
    compileInjectorDeclaration: () => undefined,
    compileComponentDeclaration: () => undefined,
  }
}

It prevents error from happening and it doesn't break anything as Angular runtime has no use when testing anything with Angular component harnesses

[kolianas]

Hello @i23591326, do you still use Playwright with Angular Component Harnesses? Do you use some custom library for that? Would really appreciate if you could share any feedback on this!