fasttime / Polytype

Dynamic multiple inheritance for JavaScript and TypeScript. Without mixins.
ISC License
61 stars 3 forks source link

polytype extended class properties not behaving as typescript extended class propeties #7

Closed st-clair-clarke closed 4 years ago

st-clair-clarke commented 4 years ago

Hi, I am trying to use polytype in my angular9/typescript project

Consider the following code for single class inheritance in typescript:

export class AbstractBaseComponent{
form: FormGroup
}

@Component ({
   selector: 'pim'
   template: `
  <form [formGroup] = 'form'>

   </form>
`

})
export class PimComponent extends AbstractBaseComponent {
// the form of the template is referenced by the form of the Abstract
BaseComponent as expected

}

For polytype multi-inheritance

@Component ({
   selector: 'pim'
   template: `
  <form [formGroup] = 'form'>

   </form>
`

})
export class PimComponent extends classes(AbstractBaseComponent) {
// the form of the template is NOT referenced by the form of the AbstractBaseComponent as expected

}

What am I doing incorrectly. My Webstorm IDE flag the template form as error (Is this IDE failure or polytype failure?)

Thanks for your help

fasttime commented 4 years ago

I'm having a problem trying to reproduce this on my machine. The sample code doesn't compile because of a missing comma after selector: 'pim'. After fixing that, Angular complains about the unknown property formGroup in the inline template.

This is what I did: first I set up an Angular 9 project from the command line.

npm i -g @angular/cli
ng new test --interactive=false
cd test
npm i polytype
ng generate component pim --inline-template

Then I edited src/app/pim/pim.component.ts ending up with this code:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { classes } from 'polytype';

export class AbstractBaseComponent{
form: FormGroup
}

@Component ({
  selector: 'pim',
  template: `
 <form [formGroup] = 'form'>

  </form>
`

})
export class PimComponent extends classes(AbstractBaseComponent) {
// the form of the template is NOT referenced by the form of the AbstractBaseComponent as expected

}

When I run ng build, this is what I'm getting:

ERROR in src/app/pim/pim.component.ts:13:8 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

13  <form [formGroup] = 'form'>
          ~~~~~~~~~~~~~~~~~~~~

This is obviously not related to Polytype. And in fact, replacing classes(AbstractBaseComponent) with AbstractBaseComponent doesn't make a difference.

It would be helpful if you could post a reproducible example, so I can check why the code in your first snippet is not producing the same error I'm getting here in the first place.

fasttime commented 4 years ago

Closing as not reproducible. Feel free to open a new issue if you think the problem still needs to be investigated.