<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ]  bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ]  bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Given that it's much easier to configure the routes when you just provide a module ( that in turn has it's own nested routes ), vs giving children manually, I'd say the approach works nice even when not lazy loading</p>
<p dir="auto">An example would be :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { AnswersModule } from './answers/answers.module';


const appRoutes: [
{
        path: 'answers',
        loadChildren: AnswersModule
    }
]"><pre class="notranslate"><code class="notranslate">import { AnswersModule } from './answers/answers.module';


const appRoutes: [
{
        path: 'answers',
        loadChildren: AnswersModule
    }
]
</code></pre></div>
<p dir="auto">Currently, the only way is to pass a function that returns a function.<br>
<code class="notranslate">() =&gt; AnswersModule</code>, which feels a bit hackish</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.1.0</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto">Instance bound methods do not work as hooks. Here is a little code sample:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" import { Component } from '@angular/core';

  @Component({
    selector: 'my-app',
    template: '&lt;h1&gt;Hello {{name}}&lt;/h1&gt;'
  })
  export class AppComponent { 
    name = 'Angular'; 
    
    ngOnInit = () =&gt; {
      this.name = 'World';
    }
  }"><pre class="notranslate"> <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

  @<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;h1&gt;Hello {{name}}&lt;/h1&gt;'</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span> 
    <span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">'Angular'</span><span class="pl-kos">;</span> 
    
    <span class="pl-c1">ngOnInit</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">'World'</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Hook is not executed, "Hello Angular" is displayed.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
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."</p>
<p dir="auto">In the documentation i found only this note:</p>
<blockquote>
<p dir="auto">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.</p>
</blockquote>
<p dir="auto">Which is explaining it in some manner, but intention is not clear still.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
StackOverflow discussion:<br>
<a href="http://stackoverflow.com/questions/43677584/angular2-instance-bound-methods-does-not-work-as-hooks" rel="nofollow">http://stackoverflow.com/questions/43677584/angular2-instance-bound-methods-does-not-work-as-hooks</a></p>
<p dir="auto">Plunkr: <a href="https://plnkr.co/edit/aZ1CYkDn06KUENmDW3a3?p=preview" rel="nofollow">https://plnkr.co/edit/aZ1CYkDn06KUENmDW3a3?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
It is kinda not transparent why Angular is behaving like that. I assume that it is <strong>by design</strong> 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.</p>
<p dir="auto">BTW, React is behaving in a predictable manner:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { render } = ReactDOM;

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

render(
  &lt;MyComponent /&gt;, 
  document.getElementById('app')
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> render <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-v">ReactDOM</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">name</span>: <span class="pl-s">'Angular'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
  
  <span class="pl-c1">componentWillMount</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">'React'</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  
  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Hello! <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-en">render</span><span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">MyComponent</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> 
  <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'app'</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Hook is called and it displays "Hello! React" as you would expect.</p>
<p dir="auto">JSBin for exploration: <a href="https://jsbin.com/yavokur/1/edit?js,output" rel="nofollow">https://jsbin.com/yavokur/1/edit?js,output</a></p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OSX El Capitan 10.11.6<br>
VSCode<br>
Express-based node.js server</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
angular: 4.1.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [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 ]</p>
</li>
</ul>

<p dir="auto">ALL</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.3+</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
node: 4.7.3</p>
</li>
</ul>