Angular2 Recursive patterns in javascript

Question

I am trying to follow this tutorial to create a nested tree view. The tutorial is in typescript, while I'm trying to do a similar thing in javascript using Angular2.

In typescript code, the tree component looks like this:

import {Component, Input} from 'angular2/core'; import {Directory} from './directory'; @Component({ selector: 'tree-view', templateUrl: './components/tree-view/tree-view.html', directives: [TreeView] }) export class TreeView { @Input() directories: Array<Directory>; } 

In javascript, which 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 raises the following error:

EXCEPTION: Unexpected value of the 'undefined' directive in the component view '() {'

I believe, because I call the directives: [TreeView] before the TreeView is fully defined. If I delete this directory line, the error will disappear. However, I don't know why it works in typescript and not javascript if typescript just compiles into javascript. This is compiled javascript from typescript code. I'm not sure what I am missing. Any help would be greatly appreciated.

Answer 1

This question has been answered several times.

First of all, classes do not rise. Quoting from MDN

An important difference between function declarations and class declarations is that function declarations are displayed, but class declarations are not. First you need to declare your class, and then access it [...]

The documentation for forwardRef says

For example, forwardRef is used when the token we need to reference for DI purposes is declared, but not yet defined. It is also used when the token that we use when creating the request is not yet defined.

So this is just how to add forwardRef to your code

 directives : [ng.core.forwardRef(function() { return TreeView; })] 

You can learn more about this topic.

• Forward links in Angular 2
• Other questions from StackOverflow