Currently Component and routable component lifecycles are defined via interfaces (e.g. OnInit).

This is problematic because the interfaces have no runtime representation in JavaScript. So at runtime, we just check if the method defined in the interface (e.g. onInit) exists on the component instance and if it does we call it. If a component has a method onInit that is not meant to be a lifecycle hook, we'll still call it.

These name collisions can result in surprising results, and if we add new lifecycle hooks, we can end up breaking existing components.

For these reasons, I propose that we move away from interfaces and use property decorators instead.

Before:

import {Component, OnInit} from 'angular2/angular2';

@Component({
  selector: 'test-foo'
})
class TestFoo implements OnInit {
  onInit() { ... }
}

After:

import {Component, OnInit} from 'angular2/angular2';

@Component({
  selector: 'test-foo'
})
class TestFoo {
  @OnInit() onInit() { ... }
}

Dart notes: this api can be implemented via transformers for production and via mirrors for development mode.

Migration notes: I'm not sure how to deal with migration just yet because we are going to reuse the same symbol for different purpose. there might be no good way to provide a transitional path, which would argue for making this change asap.

//cc: @mhevery @vsavkin @tbosch @btford