Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
st-clair-clarke opened this issue Feb 24, 2020 · 2 comments

Comments

@st-clair-clarke
Copy link

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
Copy link
Owner

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
Copy link
Owner

fasttime commented Apr 2, 2020

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

@fasttime fasttime closed this as completed Apr 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants