Host-based testing can't resolve component under karma-typescript (JIT compiler)

[thw0rted]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report ??? 
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X] Support request ???
[ ] Other... Please describe:

Problem description

I wrote some tests using createHostFactory that worked fine when I built my code using karma-webpack, but I'm trying to switch to karma-typescript and I can't get them working again.

Under karma-webpack, the AngularCompilerPlugin did AOT (Ivy) template compilation, but when I switched to karma-typescript, I had to use the JIT compiler. For non-Spectator tests, I would change

testBed.configureTestingModule({
  providers: [
    // Dependencies, mocks and whatnot
  ],
  declarations: [ HelloComponent ],
});
fixture = testBed.inject(HelloComponent);

to

testBed.configureTestingModule({...})
  .compileComponents()
  .then(() => fixture = testBed.inject(HelloComponent));

This change allowed all the tests to run without problems. For Spectator tests, I didn't need to include a call to configureTestingModule before, but without one I got errors during createHost about un-compiled templates. So, I changed

const createHost = createHostFactory({
  component: HelloComponent,
  providers: [ ... ],
});

beforeEach(() => {
  host = createHost("<foo-component someInput='value'>");
});

to

const createHost = createHostFactory({
  component: HelloComponent,
  declareComponent: false,
});

beforeEach(() => {
  testBed.configureTestingModule({
    providers: [ ... ],
    declarations: [ HelloComponent ],
  )}
    .compileComponents()
    .then(() => host = createHost("<foo-component someInput='value'>"));
});

This fixed the error about uncompiled templates, but now during the createHost call, it fails with an error that it's unable to resolve HelloComponent. The error message includes the entire (compiled) text of HelloComponent inline -- from the linked repro:

        Error: Cannot find component/directive function HelloComponent() {
                this.color = "blue";
                this.title = "Hello :)";
            } in host template 😔

It looks like the template engine is trying to use HelloComponent as an injection token (?) but failing to look it up, even though it's been added to declarations. I've also tried declaring it using createHostFactory, by removing declareComponent: false, and taking it out of the declarations passed to configureTestingModule, but the error is the same.

I tried looking through the docs, both here and at karma-typescript, but I'm running out of ideas. As I said, it worked fine when the tests were bundled with Webpack/AngularCompilerPlugin. I don't know if I'm using Spectator wrong, using karma-typescript wrong, or if there's a bug in one or the other of the libraries that prevents this from working.

Minimal reproduction of the problem with instructions

Repro here, based on the karma-typescript Angular starter project.

Environment

Angular version: 12.2.2
 

[NetanelBasal]

My knowledge of this package is limited, and this is beyond the scope of Spectator. We encourage you to create a PR and explain any changes you would like to make. Moving to discussions for now.

[localpcguy]

Not a problem, thanks for the reply and information about the direction you went. I was able to get it working via a combination of what you posted in the first post and some changes - basically manually compiling it with TestBed and using Spectator more sparingly in those tests.

For Spectator, @NetanelBasal, does the fact that I'm not using karma-typescript and still running into this problem change your thoughts on whether it's a bug related to Spectator? I can try to provide more information about my environment if you need it, but if it helps, I was seeing this on Angular v12.

[NetanelBasal]

@localpcguy, as I said earlier:

My knowledge of this package is limited, and this is beyond the scope of Spectator. We encourage you to create a PR and explain any changes you would like to make

The usage of this package is uncommon. You're welcome to investigate and suggest any changes we need to do :)

[thw0rted]

@NetanelBasal , if @localpcguy can put together a minimal repro that uses only this package, would you be willing to take a look at it? As I said last year, the Angular template compiler is kind of a tough black box to crack, so getting to a root cause is going to be very difficult for those of us who haven't spent a lot of time with the internals.

[NetanelBasal]

I can take a look at it, but I can't guarantee anything.

[localpcguy]

I'll try to put something together, but also fairly busy right now, so may not be immediate, particularly since I was able to work around the issue. For now, it does seem like a fairly low impact issue, my concern is that if it is related to Ivy or later versions of Angular, it may become more prevalent as an issue as people upgrade/update.