Components are not compiled

[chronospatian]

Version: 1.41.2

Components should be compiled before they are mounted.

    Error: Error: Component 'AppComponent' is not resolved:
     - templateUrl: ./app.component.html
     - styleUrls: ["./app.component.css"]
    Did you run and wait for 'resolveComponentResources()'?

        at AppComponent.get (http://localhost:3100/assets/index-9fa00b93.js:33829:27)
        at getComponentDef$2 (http://localhost:3100/assets/index-9fa00b93.js:9986:16)
        at reflectComponentType (http://localhost:3100/assets/index-9fa00b93.js:39701:26)
        at __pwRenderComponent (http://localhost:3100/assets/index-9fa00b93.js:117317:29)
        at window.playwrightMount (http://localhost:3100/assets/index-9fa00b93.js:117356:25)
        at eval (eval at evaluate (:226:30), <anonymous>:12:18)
        at async <anonymous>:252:30
        at AppComponent.get (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:33829:27)
        at getComponentDef$2 (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:9986:16)
        at reflectComponentType (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:39701:26)
        at __pwRenderComponent (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:117317:29)
        at window.playwrightMount (<omitted>/web-component-harness/WebComponentHarness/http:/localhost:3100/assets/index-9fa00b93.js:117356:25)
        at eval (<omitted>/web-component-harness/WebComponentHarness/eval at evaluate (:226:30), <anonymous>:12:18)
        at <omitted>/web-component-harness/WebComponentHarness/async <anonymous>:252:30
        at mount (<omitted>/web-component-harness/WebComponentHarness/node_modules/@playwright/experimental-ct-core/lib/mount.js:50:35)
        at <omitted>/web-component-harness/WebComponentHarness/src/app/harness.spec.ts:33:24

Minimal reproduction

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

// app.component.spec.ts
import {test} from "@sand4rt/experimental-ct-angular";
import {AppComponent} from "./app.component";

test.describe('harness', () => {
  test('it should work', async ({ mount }) => {
    const spec = await mount(AppComponent)
  })
})

[chronospatian]

Workaround for now is to use inline html and css in a single-file component.

[sand4rt]

Hey @chronospatian, thanks a lot for submitting the issues. The library is actually close to being merged with the Playwright repository: https://github.com/microsoft/playwright/pull/27783 so I'm not spending time on this right now. This and other issues should no longer be a problem in that version

[chronospatian]

@sand4rt I tried linking the PR branch and I get the same errors. Where should I direct this to?

[chronospatian]

Adding @analogjs/vite-plugin-angular to playwright config fixed this for me. Copied from https://github.com/sand4rt/playwright/blob/hello-angular-ct/tests/components/ct-angular/playwright.config.mts