Property binding ignores @Input types

@input

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Property binding doesn't check types when compiling.

Expected behavior

Property binding shows some error when you bind an incorrect type

Minimal reproduction of the problem with instructions

JIT:
https://plnkr.co/edit/JQbbBH0DcRA5fEwchn5L?p=preview

AoT:
https://github.com/rinfan/input-property-binding-broken
Reproduction steps:

download my repo
npm install
npm run start
navigate to localhost:4201
Everything compiled fine with AoT, even though the second input child component has a date entered for the number @input field.

I would expect that using a non-number as input to "InputChild"'s Input would show some kind of warning or error.

What is the motivation / use case for changing the behavior?

Better type safety
Sorry if there another issue or tsconfig/cli config json property I can set for this.

Environment

Plunker, this problem seems to happen with both the JIT and AOT in my project.


Angular version: 5.0.3   (I think it was an issue in 4.* too though)


Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX (on nightly it seems like plunker is broken but I don't think thats your problem)
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ x] IE version 11
- [ ] Edge version XX

your plunker example is running in JIT mode which does no type checking. In AoT mode (which can be only done through the cli right now, you should get an error.)

@mhevery

@mhevery
Sorry I should have added an AoT example in my original post.
https://github.com/rinfan/input-property-binding-broken

Is it possibly I have the wrong .angular-cli or tsconfig settings to get types on property binding?

Reproduction steps:

download my repo
npm install
npm run start
navigate to localhost:4201
Everything compiled fine with AoT, even though the second input child component has a date entered for the number @Input field.

@rinfan

Can be reproduced in edit.ng which is using AOT:

Should indeed be an Angular problem.

@rinfan Could you add your repro repo to the original issue body and reopen it?

From #19929 it's clearly there is currently NO type checking for @Input() properties, otherwise it would not be possible to assign an empty string to boolean property.

@trotyl

@trotyl I don't think I can reopen it because someone else closed it.
But I did add the AoT repro steps to the OP, good idea.

@mhevery

@mhevery please unclose this, I provided an AOT example of it being broken.

@mhevery

@mhevery Could you please consider reopening this issue?
With the fullTemplateTypeCheck compiler option at true, I expected that I couldn't assign an incompatible type to a property binding of a component/directive.
This unsafe behavior can lead to numerous errors at runtime and is a real pain for a large application with many components.

Yes, this issue has been observed in 4.* too

Yes, this issue has been observed in 4.* too

Not only it is observed in 4, it was introduced in 4.

In other words, this is a regression currently headed into its 28th month.

With how easily this got by the regression test suite, it's amazing that Ivy is taking as long to pass them as it is.

The new compiler (supporting ivy) type checker is more restrictive and should enforce these type constraints on @Input() properties. Can you try compiling with full type checking and ivy enabled?

@petebacondarwin

Wow, I completely forgot about this issue and figured it ended up in a never fix bucket. I'm pleasantly surprised that it works now! Thanks a lot @petebacondarwin(and to @trotyl for making the followup issues I was too lazy to do)! I'm totes fine with this being closed again.

For future people who might run into this issue:
Using:

Angular 8.1.2(and CLI)
Enabling Ivy in the tsconfig https://angular.io/guide/ivy

While the error is somewhat cryptic(it might be nice if it pointed to the template line as opposed to some generated constructor), its there and stops compilation with an error!

PS C:\Users\admin\input-property-binding-broken-two> ng build --aot

chunk {main} main-es2015.js, main-es2015.js.map (main) 646 bytes [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 701 bytes [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 16.3 kB [initial] [rendered]
Date: 2019-07-28T18:34:06.641Z - Hash: 243c20d256b51503f26c - Time: 11055ms

ERROR in __ng_typecheck__.ts:15:24 - error TS2322: Type 'Date' is not assignable to type 'number'.

15     var _t7 = _ctor1({ coolNumber: ctx.notCoolNumber });
                          ~~~~~~~~~~

  src/app/input-child.component.ts:15:12
    15   @Input() coolNumber: number;
                  ~~~~~~~~~~
    The expected type comes from property 'coolNumber' which is declared here on type 'Partial<Pick<InputChildComponent, "coolNumber">>'

PS C:\Users\admin\input-property-binding-broken-two> echo $LastExitCode
1

Using components that look something like:

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>Hello {{ name }}</h2>
      <input-child [coolNumber]="coolNumber"></input-child>
      <br>
      <input-child [coolNumber]="notCoolNumber"></input-child>
    </div>
  `,
})
export class AppComponent {
  name: string;
  notCoolNumber: Date = new Date();
  coolNumber: number = 3;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
}

@Component({
  selector: 'input-child',
  template: `
  <button (click)="doStuff()">
   This better be a number! {{ coolNumber }}.
   </button>
   `
})
export class InputChildComponent {
  @Input() coolNumber: number;

  doStuff(): void {
    if (typeof this.coolNumber === 'number') {
      alert(`${this.coolNumber} + 1 is : ${this.coolNumber + 1}`);
    } else {
      alert(`Huh?!?!?!? ${this.coolNumber}`);
    }
  }
}

Glad you are unlocked, as it were.

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

Navigation Menu

Repository navigation

Property binding ignores @Input types #20600

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Property binding ignores @Input types #20600

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Activity

mhevery commented on Nov 28, 2017

rinfan commented on Nov 30, 2017

trotyl commented on Nov 30, 2017

trotyl commented on Nov 30, 2017

rinfan commented on Nov 30, 2017

rinfan commented on Dec 2, 2017

Stouffi commented on Feb 15, 2018

sdharmavarapu commented on Apr 12, 2018

pauldraper commented on Jul 14, 2019

petebacondarwin commented on Jul 15, 2019

rinfan commented on Jul 28, 2019

petebacondarwin commented on Jul 28, 2019

angular-automatic-lock-bot commented on Sep 15, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions