@Input on a property throws exception

[victorhurdugaci]

Repro:

1. tns create TestApp --ng

2. tns platform add android

3. Change app.component.ts to:

   import {Component, Input} from "@angular/core";
   
   @Component({
       selector: "my-app",
       template: '<Label text="Hello"></Label>'
   })
   export class AppComponent {
       @Input() numberField: number;
   
       // Comment the @Input attribute and you'll
       // not get an exception
       @Input()
       public set NumberProperty(val: number) {
       }
   }

4. Run

Expected: the app runs without any problem
Actual: exception:

java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 
Fail to load module: /data/data/org.nativescript.TestApp/files/app/main.js

TypeError
File: "<unknown>, line: 1, column: 265

StackTrace: 
    Frame: function:'decorate', file:'/data/data/org.nativescript.TestApp/files/app/tns_modules/reflect-metadata/Reflect.js', line: 76, column: 23
    Frame: function:'__decorate', file:'/data/data/org.nativescript.TestApp/files/internal/ts_helpers.js', line: 10, column: 96
    Frame: function:'', file:'/data/data/org.nativescript.TestApp/files/app/app.component.js', line: 16, column: 5
    Frame: function:'', file:'/data/data/org.nativescript.TestApp/files/app/app.component.js', line: 29, column: 2
    Frame: function:'require', file:'', line: 1, column: 266
    Frame: function:'', file:'/data/data/org.nativescript.TestApp/files/app/main.js', line: 4, column: 23
    Frame: function:'require', file:'', line: 1, column: 266


    at android.app.ActivityThread.handleBindApplica

Turns out that if you @Input() on a property, you get that exception. If you remove the property or the @Input, everything works. Also, note that @Input on a field works fine.

• tns version: 2.0.1
• OS: Win 10
• Emulator: genymotion

[matt4446]

I use them all over the place so they do work (on both properties and fields), but I do always give them a name, try checking that.

 public numberField: number;

 @Input("anotherField") 
 public anotherField: any;     

 @Input("number")
 public set NumberProperty(val: number) {
   console.log(val) 
   this.numberField = val
 }

I can't see any other problems in your code.

[victorhurdugaci]

@matt4446 I tried your suggestion but it didn't solve the problem. I get the same exception. Maybe it's platform/version specific issue?

[victorhurdugaci]

Just found out that if I use Component's inputs property, things work.

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

@Component({
    selector: "my-app",
    template: '<Label text="Hello"></Label>',
    inputs: [ 'NumberProperty' ]
})
export class AppComponent {
    public set NumberProperty(val: number) {
    }
}

[matt4446]

I use Genymotion, so probably not ;)

Taking another look and this time creating from tns create TestApp --ng

By the way I'm no closer to solving your problem (using the @Input, so hopefully someone else can point it out. tns create TestApp --ng was quite easy to repeat a few. I'm leaning towards there is something wrong with the output of the command.

It seemed a little odd having an input parameter on the main component. (but I managed to reproduce the error).
So I added a very basic component which also blew up (to add to the main component), but before adding the input parameter it won't run:

JS: TypeError: Cannot read property 'query' of null
JS:     at /data/data/org.nativescript.TestApp/files/app/tns_modules/@angular/compiler/src/provider_parser.js:360:37
etc

So I've compared:
tsconfig, slightly different -> changed to be equal - probably not the problem.
package.json -> a few differences, changed that too. probably not the problem.
app/package.json -> cleared that out. probably not the problem.

Router is next ...
nope, not that either (same error as cannot read property query. Single page was fine, it just didn't like adding a component like the one at the end of this post).

Other things tried:
deleting the node_modules
and platforms a few times.

So I've currently failed to find a significant difference between the project setup now and one of my demos. I've never used the command tns create TestApp --ng` before so there could be just something obvious that isn't setup correctly.

I presume you don't get the same result by following the steps on the getting started page? Which I then diverged to become material elements test project

Where adding what failed before just works as with my other projects. Curios.

@Component({
  selector: "test",
  template: `
    <Label text="hi" textWrap="true"></Label>

  `
})
export class TestComponent{

  @Input("hi")
  public set Hi(value: string){
    console.log(value);
  }

}

Add the directive to the component, and the xml
directives: [TestComponent]

<test hi="hello"></test>

output:

JS: ANGULAR BOOTSTRAP DONE.
JS: hello

[vakrilov]

It turned out to be an issue with the global __decorate function - we are using an outdated version of it in the android-runtime. It should be resolved with the next release of NativeScript (there is already a PR).
For now you can keep using the @Components({ ... inputs: [] }) workaround.