Ivy: Input fields inherited from abstract class cause runtime exception

[Enngage]

Hey,

Just tried 9.0.0-next.4 and it seems that when you have an abstract component class:

export abstract class BaseEditFormComponent {
    @Input() itemId?: number;
}

And then you inherit it by specific components:

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'edit-form',
    templateUrl: 'edit-form.component.html'
})
export class EditFormComponent extends BaseEditFormComponent {
    constructor() {
        super();
    }
}

And use it like:

<edit-form [itemId]="itemIdProp"></edit-form>

You get runtime exception such as

global-error.handler.ts:59 Application encountered an error:  Error: Template error: Can't bind to 'itemId' since it isn't a known property of 'edit-form'.
    at createUnknownPropertyError (core.js:12888)
    at validateAgainstUnknownProperties (core.js:12827)
    at elementPropertyInternal (core.js:12732)
    at ɵɵproperty (core.js:19801)
    at EditFormComponent(template.html:2)
    at executeTemplate (core.js:12315)
    at refreshView (core.js:12179)
    at refreshComponent (core.js:13484)
    at refreshChildComponents (core.js:11914)
    at refreshView (core.js:12238)

Adding itemId property to EditFormComponent component fixes the issue and app runs as expected.

Is such behavior expected?

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.2
Node: 10.16.0
OS: win32 x64
Angular: 9.0.0-next.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.2
@angular-devkit/build-angular     0.803.2
@angular-devkit/build-optimizer   0.803.2
@angular-devkit/build-webpack     0.803.2
@angular-devkit/core              8.3.2
@angular-devkit/schematics        8.3.2
@angular/cdk                      8.1.4
@angular/cli                      8.3.2
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.1.4
@ngtools/webpack                  8.3.2
@schematics/angular               8.3.2
@schematics/update                0.803.2
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.39.2

[AndrewKushnir]

Hi @Enngage,

With Ivy, base classes should also be annotated using @Directive() decorator. There is a migration that should help transition existing code to the new pattern.

Please try to add the @Directive() decorator to the base class and let us know if that fixes the problem.

Thank you.

[Enngage]

Hi @AndrewKushnir,

Tried adding Directive to my base class such as:

@Directive()
export abstract class BaseEditFormComponent {
    @Input() itemId?: number;
}

But then my app won't start due to this error :/

Error: Uncaught (in promise): Error: Dependency array must have arguments.
Error: Dependency array must have arguments.
    at reflectDependency (core.js:16144)
    at core.js:16117
    at Array.map (<anonymous>)
    at convertDependencies (core.js:16113)
    at reflectDependencies (core.js:16104)
    at directiveMetadata (core.js:38066)
    at getDirectiveMetadata (core.js:38036)
    at Function.get (core.js:38009)
    at getDirectiveDef (core.js:1812)
    at addBaseDefToUndecoratedParents (core.js:38094)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:39829)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)

Not sure if that is relevant, but I do have dependencies injected into my component which are passed to base class via super call.

[AndrewKushnir]

Hi @Enngage,

I tried to reproduce the problem locally, but failed. Here is my TestBed test (which is passing):

  it('should call ngOnInit before ngDoCheck if creation mode', () => {

    @Injectable()
    class MyService {}

    @Directive()
    abstract class BaseEditFormComponent {
      @Input() itemId?: number;
      constructor(service: MyService) {}
    }

    @Component({
      selector: 'edit-form',
      template: '...',
    })
    class EditFormComponent extends BaseEditFormComponent {
      constructor(service: MyService) { super(service); }
    }

    @Component({
      template: '<edit-form [itemId]="itemIdProp"></edit-form>',
    })
    class App {
      itemIdProp: string = 'id';
    }

    TestBed.configureTestingModule({
      declarations: [App, EditFormComponent],
      providers: [MyService],
    });

    expect(() => {
      const fixture = TestBed.createComponent(App);
      fixture.detectChanges();
    }).not.toThrow();
  });

Could you please have a look at the test and let me know how it should be changed to better mimic your use-case and repro the problem?

Thank you.

[Ristaaf]

I have the same problem (in our giant codebase with lots of abstract component classes)

Not sure why the testbed above works, but this is my simplest possible reproduction:

Using @angular/cli@next I do an ng new and then:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<car [topSpeed]="100"></car>'
})
export class AppComponent {
}

car.component.ts

import { Component, Directive, Input } from '@angular/core';

@Directive()
export abstract class VehicleAbstract {
    @Input()
    topSpeed;
}

@Component({
    selector: 'car',
    template: '<div>Car</div>'
}) export class CarComponent extends VehicleAbstract {
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CarComponent } from './car.component';

@NgModule({
  declarations: [
    AppComponent, CarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And then run ng build
Without ivy it builds fine, with ivy I get:

ERROR in src/app/app.component.ts:5:19 - error TS8002: Can't bind to 'topSpeed' since it isn't a known property of 'car'.

5   template: '<car [topSpeed]="100"></car>'

[AndrewKushnir]

@Ristaaf thanks for additional information. It looks like PR #33131 should fix this problem. Thank you.

[alxhub]

This was resolved in #33131 :D

[Enngage]

@AndrewKushnir, thanks! Yeah, that indeed fixed the issue I initially raised but wasn't able to easily reproduce due to the huge code base I have.

Though it raised another issue. I'm looking at https://next.angular.io/guide/migration-undecorated-classes which explains the change and it makes sense.

However, the compiler failes with

global-error.handler.ts:57 Application encountered an error:  Error: Uncaught (in promise): Error: Dependency array must have arguments.
Error: Dependency array must have arguments.
    at reflectDependency (core.js:17416)
    at core.js:17389
    at Array.map (<anonymous>)
    at convertDependencies (core.js:17385)
    at reflectDependencies (core.js:17376)
    at directiveMetadata (core.js:38922)
    at getDirectiveMetadata (core.js:38866)
    at Function.get (core.js:38843)
    at getDirectiveDef (core.js:1822)
    at addDirectiveDefToUndecoratedParents (core.js:38950)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40655)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)

If you have a constructor with dependencies that cannot be resolved. In my case I have constructor in my abstract class like:

   constructor(protected dependencies: ComponentDependencyService, protected cdr: ChangeDetectorRef, config: {
      service: BaseTypeService<TItem>
    }) {
    }

dependencies and cdr are resolved correctly, but the config isn't because child class explicitely sets config in the super call.

I'm guessing that ignoring that property would work? Is there a way to ignore it?

Edit:

Seems like using Optional() does the trick :-)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}