angular - Angular2 Recursive Templates in javascript -

i have been trying follow this tutorial create nested tree view. tutorial in typescript while trying similar thing in javascript angular2.

in typescript code, tree-view component looks so:

import {component, input} 'angular2/core';  import {directory} './directory';  @component({     selector: 'tree-view',     templateurl: './components/tree-view/tree-view.html',     directives: [treeview]  })  export class treeview {     @input() directories: array<directory>;  } 

in javascript should convert to:

treeview = ng.core   .component({     selector: 'tree-view',     templateurl: './components/tree-view/tree-view.html',     directives: [treeview],     inputs: ['directory'],   })   .class({     constructor: function() {     },   }); 

however, javascript throws following error:

exception: unexpected directive value 'undefined' on view of component 'function () {'

i believe it's because i'm calling directives: [treeview] before treeview has been defined. if remove directive line, error goes away. however, don't know why work in typescript , not javascript if typescript compiles javascript. this compiled javascript typescript code. i'm not sure i'm missing. super appreciated.

this question has been answered few times

first of classes not hoisted. quoting mdn

an important difference between function declarations , class declarations function declarations hoisted , class declarations not. first need declare class , access [...]

the documentation forwardref says

for instance, forwardref used when token need refer purposes of di declared, not yet defined. used when token use when creating query not yet defined.

so it's easy adding forwardref code

directives : [ng.core.forwardref(function() { return treeview; })] 

you can read more subject

• forward references in angular 2
• others questions stackoverflow