help(Angular Component Harnesses): throwing JIT compilation failed for injectable errors

[i23591326]

What are you trying to do?

I'm not sure if this github issue type suit my case as I already solved an issue for my project. However it costed us couple of weeks trying to solve the issue different ways, so I hope this post might help someone.
As far as I understand there is no way to fix it without Component harnesses braking changes, so feel free to close it.

I tried to update Angular from 12 to 14 version when using Angular Component harnesses with Playwright-test runner for e2e testing and with testbed and Karma for integration testing (here is the related issue in playwright repo JIC).
I prepared harnesses the way them work in ESM mode in NodeJS.
I got an error JIT compilation failed for injectable [class PlatformLocation] when importing some of Material component harnesses into test files.

What troubleshooting steps have you tried?

in playwright.config.ts I add following lines:

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

Reproduction

Steps to reproduce:
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 microsoft/playwright#13078 (comment) if I want to stick to Playwright test runner.
I build harnesses with tsc and postprocess them as ESM mode has stronger rules for source files.
I get JIT compilation failed for injectable [class PlatformLocation] when test importing for example MatDialogHarness as its public-api has export containing some of Angular internals such as @directive() decorator that seem to throw the error the moment it's imported in NodeJS environment starting from version 13 as I heard.

Environment

• Angular: 14
• CDK/Material: Material
• Browser(s): NodeJS
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[andrewseguin]

Thanks for documenting the issue you had but it looks like there's nothing we can do on our end to help this in the future

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}