Ng 8 + ivy: Component inheritance binding error

[runner78]

🐞 bug report

Affected Package

The issue is caused by package @angular/....

Is this a regression?

It work when not using Ivy.

Description

🔬 Minimal Reproduction

Abstract class

export abstract class AbstractComponent {
  @Input() value: string;
}

Component

export class ChildComponent extends AbstractComponent {
}

It works with
<dum-child value="test"></dum-child>

Create an error:
<dum-child [value]="'test'"></dum-child>

🔥 Exception or Error

ERROR in __ng_typecheck__.ts(34,10): error TS2339: Property 'value' does not exist on type 'HTMLElement'.

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.0
Node: 10.16.0
OS: darwin x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

[JoostK]

Thanks for reporting. Inheritance should be supported in the template type checker, as long as the base class is statically known (it should't be some dynamically computed expression). In this case however, it looks like the problem is that the base class is not declared in an NgModule, which currently means its metadata (the details on inputs, outputs etc.) cannot be retrieved. This metadata is required for template type-checking purposes, so that's where the false positive originates. We'll have to revisit this machinery a bit to fix the issue.

[JoostK]

I should mention that you should be able to workaround the issue by disabling the template type checker. In tsconfig.app.json, you'll have to set "fullTemplateTypeCheck": false under "angularCompilerOptions".

[JoostK]

Tracked in FW-1352

[runner78]

I have tried now "fullTemplateTypeCheck": false but has no effect, same error.

[kemsky]

The same error was reported here #30080.

[JoostK]

@kemsky Thanks for linking. Yes, your issue has the same root cause, only now do I understand what is happening exactly.

[kara]

Seems like we should close this as a duplicate of #30080 so we can track progress / comments in one place. Thanks for reporting @runner78, please follow #30080

[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.}