AngularDart中Async pipe无法通过点标记法正常工作

补充说明：我使用的是AngularDart 5，已在GitHub提交相关问题。

我最初编写的AngularDart组件是可以正常工作的，代码如下：

@Component(
  selector: 'todo-list',
  template: '<div>{{todos | async}}</div>',
  directives: [coreDirectives],
  pipes: const [AsyncPipe]
)
class TodoListComponent {
  Stream<List<TodoItem>> todos = new TodoListViewModelImpl(new TodoServiceImpl()).output.todoItems;
}

运行后模板显示空列表，符合预期——毕竟还没有添加任何待办事项：

不过我想优化代码结构，不想通过组件内的todos属性间接访问output.todoItems，希望直接在模板里用点标记法调用viewModel.output.todoItems，于是修改了组件代码：

@Component(
  selector: 'todo-list',
  template: '<div>{{viewModel.output.todoItems | async}}</div>',
  directives: [coreDirectives],
  pipes: const [AsyncPipe]
)
class TodoListComponent {
  TodoListViewModel viewModel = new TodoListViewModelImpl(new TodoServiceImpl());
}

但这次修改后代码完全无法正常工作，而且连任何错误提示都没有，模板里什么内容都不显示：

内容的提问来源于stack exchange，提问作者Tobias Marschall