Solution

Have ts2dart remove the forwardRef statements so that forwardRef(()=>MyType) becomes MyType.

example:

directives: [
  bind(forwardRef(() => MyType).toClass(forwardRef(() => MyImpl),
  forwardRef(() => MyImpl)
]

becomes

directives: [
  bind(MyType).toClass(MyImpl),
  MyImpl
]

Problem

I have a component called MdDialogContainer. It contains in its template an MdDialogContent:

@Component({
  selector: 'md-dialog-container'
})
@View({
  directives: [MdDialogContent]
})
class MdDialogContainer { ... }

MdDialogContent, however, needs to inject its parent MdDialogContainer so that it can set a property on the container:

@Directive({selector: 'md-dialog-content'})
class MdDialogContent {
  constructor(@Parent() dialogContainer: MdDialogContainer, elementRef: ElementRef) {
    dialogContainer.contentRef = elementRef;
  }
}

This won't work with the way that hoisting of class constructs works in ES6. We can work around this by using a forward declaration for the container:

@Component({
  selector: 'md-dialog-container',
  hostListeners: {
    'body:^keydown': 'documentKeypress($event)'
  }
})
@View({
  templateUrl: 'angular2_material/src/components/dialog/dialog.html',
  directives: [forwardRef(() => MdDialogContent)]
})
class MdDialogContainer { ... }

This works great for TS / JS, but is no good when compiled to dart since directives isn't const any more.

@Query might have been a workaround to this issue, but the onChange of the MdDialogContainer is too late to have the needed property set (results of @Query are not ready yet in the constructor).

This is blocking moving this dialog component to TypeScript.

FYI @mprobst @alexeagle @rkirov