Timeout with angular 4/2 app with protractor 5.x

[jlin412]

Protractor 5 timeout with angular 4/1 hybrid app'
It seems to timeout with waitForAngular method. I turned off waitForAngular and protractor 5 will go to next command.
I try a few things and none to work:

1. Downgrade to angular
2. add or remove useAllAngular2AppRoots: true in the config.
3. Try prortactor 4.x

Bug report

• Node Version: 6.10.4
• Protractor Version: 5.1.1
• Angular Version: 4.0.2
• Browser(s): chrome
• Operating System and Version Mac Sierra

[NickTomlin]

Could you please provide a small reproducible example repo or snippet? That will make it easier to diagnose this. Thanks!

[heathkit]

Please see the docs about dealing with timeouts in Angular 2+ here: https://github.com/angular/protractor/blob/master/docs/timeouts.md#angular

[disophisis]

@NickTomlin We've been seeing this issue as well with a hybrid angular 4 app. A good simple base case for this would be codecraftpro/angularjs-migration-workshop repo.

The step-7 branch is where you can see the issue. I just put together a simple protractor 5.1.1 test that navigates to the site and tries to gets the page title and it times out.

[jlin412]

Our developer dug in a little more and found isStable check in waitForAngular never come to rest when our angular 1 app has never ending $interval monitor service. It is weird because angular is not supposed to track $interval. The theory was angular 1 app is tracked as one zone and there may be a bug in zone.js.

[heathkit]

This is kind of related to angular/angular#6385.

In an upgraded app, AngularJS code is also running in the Angular zone. I think this is actually a bug in Angular's Testability, since it seems to wait for intervals but probably shouldn't. You can work around this by making your AngularJS code aware of the Angular zone and running outside it. So, for example:

if (Zone && Zone.current.name === 'angular') {
  let angularZone = Zone.current;
  Zone.parent.run(() => {
    $interval(() => {
       // Stuff here is run outside the Angular zone and will not be change detected
       angularZone.run(() => {
         // Inside the zone and will be change detected.
       });
    }, 500);
  });
}

You can also do this in a less hackish way by downgrading NgZone and injecting it into your AngularJS controller.

[jlin412]

@heathkit thanks for reply. Our dev decide to create a separate zone and keep monitoring service with interval in there. That seems to work.

[thelgevold]

This is the underlying issue: angular/angular#16349

[Red-3]

@jlin412 Please could you provide an example of your solution. Would be interested to know if it might work with our Hybrid app?
Was it an isolated change, or did you have to change code throughout the app?

[gviligvili]

is there any updates? or other ways to solve it elegantly ? getting outside - inside the zone is not something I'd rather do.

[AshokKumarMelarkot]

Hi We are facing the same issue..

My configuration
Node Version: 6.10.4
Protractor Version: 5.2.0
Angular Version: 4.0.2
Browser(s): chrome

Tried the following things ..
Downgraded to Protractor 4.X.X
Chrome driver chromedriver_2.33.zip

Expecting fix for the same.

[AshokKumarMelarkot]

This issue has been fixed with a small change in Application.

Replaced javascript setTimeOut with angular default timeout for the screen load.

[mhinkka]

I have a hybrid Angular application (6.1.4 and 1.6.9) that needs to use Angular Material in AngularJS components. Angular Material (1.1.7) seems to render animations all the time periodically inside angular zone causing protractor E2E tests to time out. Does anyone have any idea how to force all third party components to poll outside Angular zone so that protractor E2E tests can be run for the application without timing out?

[manuman94]

@mhinkka I'm getting the same timeouts using Angular Material when I use "autosize" attribute for mat-sidebar-container. That cause a reflow and breaks Protractor waits.

How did you solve that situation? I'm checking the "autosize" method and is calling this method from outside Angular zone.

Thank you, greetings.