Issue 1:
I'm submitting a ... (check one with "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

What is the motivation / use case for changing the behavior?

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

An example would be :

import { AnswersModule } from './answers/answers.module';

const appRoutes: [
{
path: 'answers',
loadChildren: AnswersModule
}
]

Currently, the only way is to pass a function that returns a function.

() => AnswersModule, which feels a bit hackish

Angular version: 2.1.0

Issue 2:
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