javascript - Angular2 Nested Components : Error: core_2.Input is not a function Error loading http://localhost:9080/app/boot.js -

i have 3 components. 1. rubric editor 2. rubric criteria editor 3. rubric descriptor editor

rubric editor main component loaded in router outlet. rubric editor loads rubric criteria editor expects input object, , rubric criteria editor loads rubric descriptor editor expects input object.

but this, doesnt works. , core2.input not function error on @input line in rubric descriptor editor. (the error blocks boot.ts , nothing runs) full stack trace:

error: core_2.input not function     error loading http://localhost:9080/app/boot.js stack trace: .execute/rubricdescriptoreditorcomponent<@http://localhost:9080/app/components/rubric/rubric-editor-descriptor.js:44:21 .execute@http://localhost:9080/app/components/rubric/rubric-editor-descriptor.js:37:48 ensureevaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2981:5 ensureevaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11 ensureevaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11 ensureevaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11 ensureevaluated@http://localhost:9080/node_modules/systemjs/dist/system.src.js:2973:11 bootstrap/</</</</</<.execute@http://localhost:9080/node_modules/systemjs/dist/system.src.js:3099:13 dodynamicexecute@http://localhost:9080/node_modules/systemjs/dist/system.src.js:715:20 link@http://localhost:9080/node_modules/systemjs/dist/system.src.js:908:20 dolink@http://localhost:9080/node_modules/systemjs/dist/system.src.js:569:7 updatelinksetonload@http://localhost:9080/node_modules/systemjs/dist/system.src.js:617:18 proceedtotranslate/</<@http://localhost:9080/node_modules/systemjs/dist/system.src.js:430:11 run@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:138:14 zoneboundfn@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:111:14 lib$es6$promise$$internal$$trycatch@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1511:16 lib$es6$promise$$internal$$invokecallback@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1523:17 lib$es6$promise$$internal$$publish@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1494:11 [4]</</</<@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:243:5 run@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:138:14 zoneboundfn@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:111:14 lib$es6$promise$asap$$flush@http://localhost:9080/node_modules/angular2/bundles/angular2-polyfills.js:1305:9 

i not sure why error comes up. have same code in component, , works fine.

why trying this? need take data input user, , forms double nested json structure.

here code rubric-descriptor-editor.ts:

import {component} 'angular2/core'; import {core_directives, form_directives} 'angular2/common'; import {     routeconfig,  router_directives, router,     locationstrategy, hashlocationstrategy } 'angular2/router'; import rubricservice "../../services/rubric-service"; import {rubric} "../../models/rubric"; import {input} "angular2/core"; import {criteria} "../../models/criteria"; import {descriptor} "../../models/descriptor";  @component({     selector: '[mydr]',     templateurl: './app/components/rubric/rubric-editor-descriptor-form.html',     directives: [core_directives,router_directives,form_directives] })  export class rubricdescriptoreditorcomponent {     @input('mydr') levdesc: descriptor;     constructor (public rubricservice: rubricservice, public router:router ){     } } 

the template component:

<textarea class="form-control" rows="6" placeholder="descriptor "          #descriptor="ngform"          [(ngmodel)]="levdesc.descriptor"          ngcontrol="descriptor" ></textarea> 

for rubric-criteria-editor:

import {component} 'angular2/core'; import {core_directives, form_directives} 'angular2/common'; import {     routeconfig,  router_directives, router, routeparams,     locationstrategy, hashlocationstrategy } 'angular2/router'; import rubricservice "../../services/rubric-service"; import {rubric} "../../models/rubric"; import {input} "angular2/core"; import {criteria} "../../models/criteria"; import {descriptor} "../../models/descriptor"; import {rubricdescriptoreditorcomponent} './rubric-editor-descriptor';   @component({     selector: '[mycr]',     templateurl: './app/components/rubric/rubric-editor-criteria-form.html',     directives: [core_directives,router_directives, form_directives, rubricdescriptoreditorcomponent] })  export class rubriccriteriaeditorcomponent {     @input('mycr') crit: criteria;     //     constructor (public rubricservice: rubricservice, public router:router, params: routeparams ){         console.log('params.get("id") : ', params.get('id'));         if (params.get('id') != null) {            // this.crit.levels = new array[4];         } else {             console.log('entered rubriceditor add mode');             //this.crit = new criteria(null);             //this.crit.levels = new array[4];         }     }  } 

the view tempalte:

<td>     <button class="close removecriterion" >&times;</button> </td> <td>     <textarea class="form-control" rows="4" placeholder="criterion description"               #description="ngform"               [(ngmodel)]="crit.description"               ngcontrol="description"     ></textarea>     <input style="margin-top: 10px" type="text" class="form-control" placeholder="weight"            #weight="ngform"            [(ngmodel)]="crit.weight"            ngcontrol="weight"     /> </td> <td *ngfor="#lev of crit.levels" [mydr]="lev"></td> 

this seems bug in typescript compiler.

i managed work around importing required in 1 statement instead of using multiple import statements.

import { component, view, input, output } 'angular2/core';

when using debugger, shows core_1.input exists, core_2.input doesn't.