TypeError when running tests in Angular v15

[gkasse]

Hello. Thanks for making a great library. I usually use this library with Angular, but when I set Angular to v15, it compiles fine with ng serve, but with ng test I get the following error.

TypeError: Cannot use 'in' operator to search for 'ngOnChanges' in undefined

The Angular component class under test is as follows.

class Foo {
  echoFoo(): void {
    console.log('foo');
  }
}

class Bar {
  echoBar(): void {
    console.log('bar');
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends Mixin(Foo, Bar) implements OnInit {
  title = 'check-ts-mixer-angular15';

  ngOnInit(): void {
    this.echoFoo();
    this.echoBar();
  }
}

The error occurs when looking for the Angular lifecycle hook method from the prototype of the parent class of the Angular component, but this error does not occur when only one class is specified as the argument of Mixin, and this error seems to occur when two or more are specified.

I apologize if this is the wrong place to ask this, but is there any solution to this problem?

Here is the configuration when I tested locally.

Node.js : 14.20.0 or 18.12.1 npm : 6.14.17 or 8.19.2 Angular : 15.0.1 ts-mixer : 6.0.2

I have created a github repository with a dependency on this library added to a minimal Angular project created with ng cli, so I hope this helps.

https://github.com/gkasse/check-ts-mixer-angular15

Also, the sample repository uses karma as a test runner, but I have the same problem when testing with jest in another project.

Thank you in advance.

[tannerntannern]

Hi @gkasse, thanks for noting the issue and especially for taking the time to create a minimal reproducible example. I'm not an Angular expert so I'll make an effort to track down the problem but I only have so much time to track down compatibility issues with every other library, so if the issue isn't obvious this issue may be stuck in "help wanted" status for awhile. Thank you for your patience.

[tannerntannern]

That said, I am a bit skeptical that ts-mixer has much to offer for an Angular project. Angular, from my limited experience, has a sophisticated dependency injection mechanism to make "composition over inheritance" design easier. Might be an avenue worth exploring if this issue can't be resolved quickly.

[gkasse]

@tannerntannern Thank you for confirming this.

Angular has a sophisticated dependency injection mechanism to make "composition over inheritance" design easier.

You are correct.

However, at that time I chose to mixin by ts-mixer instead of dependency injection because I wanted some functionality to be shared as the behavior of the component class.

I am thinking of using dependency injection, but for the reasons above, I was hoping to find a way to continue using ts-mixer, which is why I asked this question.

But I hope to be able to solve this problem with ts-mixer as it is, and I will look into solving it with dependency injections.