Instance bound methods do not work as hooks

[ValeriiVasin]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Instance bound methods do not work as hooks. Here is a little code sample:

 import { Component } from '@angular/core';

  @Component({
    selector: 'my-app',
    template: '<h1>Hello {{name}}</h1>'
  })
  export class AppComponent { 
    name = 'Angular'; 
    
    ngOnInit = () => {
      this.name = 'World';
    }
  }

Current behavior
Hook is not executed, "Hello Angular" is displayed.

Expected behavior
Hook should be executed, and we would see "Hello World" instead. Or (if it is by design) - some message would be much appreciated in DEV mode. Smth like, "You are trying to use instance bound method for hooks. It will not work."

In the documentation i found only this note:

Angular instead inspects directive and component classes and calls the hook methods if they are defined. Angular finds and calls methods like ngOnInit(), with or without the interfaces.

Which is explaining it in some manner, but intention is not clear still.

Minimal reproduction of the problem with instructions
StackOverflow discussion:
http://stackoverflow.com/questions/43677584/angular2-instance-bound-methods-does-not-work-as-hooks

Plunkr: https://plnkr.co/edit/aZ1CYkDn06KUENmDW3a3?p=preview

What is the motivation / use case for changing the behavior?
It is kinda not transparent why Angular is behaving like that. I assume that it is by design for performance reasons. But it would be nice to mention that explicitly and provide a message for DEV mode to prevent others from spending time on such thing.

BTW, React is behaving in a predictable manner:

const { render } = ReactDOM;

class MyComponent extends React.Component {
  state = {
    name: 'Angular',
  };
  
  componentWillMount = () => {
    this.state.name = 'React';
  }
  
  render = () => {
    return <h1>Hello! {this.state.name}</h1>;
  }
}

render(
  <MyComponent />, 
  document.getElementById('app')
);

Hook is called and it displays "Hello! React" as you would expect.

JSBin for exploration: https://jsbin.com/yavokur/1/edit?js,output

Please tell us about your environment:
OSX El Capitan 10.11.6
VSCode
Express-based node.js server

• Angular version: 2.0.X
  angular: 4.1.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

ALL

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 2.3+

• Node (for AoT issues): node --version =
  node: 4.7.3

[trotyl]

Duplicate of #7270

[ValeriiVasin]

seem to work as intended, as mentioned here

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}