upgradeAdapter Change detection issue when emitting events from ngOnInit or object construction.

I’m submitting a … (check one with “x”)

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

Current behavior If you emit an event from a child component ngOnInit, then set a flag on the parent as a result of that event and use an ngIf to evaluate that flag, the template is unable to render the *ngIf element. As a secondary bug, if you’re using upgradeAdapter, an exception is swallowed. If you’re not using the upgradeAdapter, the following error occurs: Error in ./FeatureComponent class FeatureComponent - inline template:16:45 caused by: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘true’.

Expected behavior Should be able to emit events in ngOnInit, or it should be documented that you can’t do this. A meaningful exception should be thrown whether you’re using the upgradeAdapter or not.

Minimal reproduction of the problem with instructions http://plnkr.co/edit/mspxruqKzHHnuuzs4z0M?p=preview

Run the plnkr. Click on Hardcoded Employee. Notice when we don’t use *ngIf, it works, when we do, the *ngIf isn’t evaluated.

Change the option to Option 3. Click on Http Employee. Notice how the *ngIf fails again.

Now go to main.ts Comment the following code: angular.module(‘myApp’) .directive(‘root’, <IDirectiveFactory>upgradeAdapter.downgradeNg2Component(Root));

upgradeAdapter.bootstrap(document.documentElement, [‘myApp’], { strictDi: true });

Uncomment the following code: platformBrowserDynamic().bootstrapModule(AppModule);

Now repeat the steps above. Same behavior but you will see template exceptions.

What is the motivation / use case for changing the behavior? Change detection fails in what could be a common occurance. This is very difficult to troubleshoot and took a very long time to find the root cause.

Please tell us about your environment: Plnkr

• Angular version: 2.0.X 2.1.2

• 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] all

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

[nodehack]

This problem occurs with something as simple as using an *ngIf to toggle 2 components.

Here’s a plunker showing a very simple implementation.
http://plnkr.co/edit/qSPoI9IHbUQKocc8ibwb?p=preview (thanks ryanlangton for the template)

You’ll see that as soon as you click the toggle button to toggle the component, the angular zone gets lost.

A workaround is to use NgZone’s run function to put you back into angular’s zone. This seems really silly though. I would expect all ng2 component lifecycle events should happen within angular’s zone.

[angular-automatic-lock-bot[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.}