question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Protractor fails when app is bootstrapped with ngUpgrade

See original GitHub issue

I am working on migrating an AngularJS (1.6) app to Angular (4) and now have a hybrid application, bootstrapped with NgUpgrade. This seems to have completely broken my Protractor tests.

Forgive me if this is just something I am doing wrong, but I can’t find any answer as to why this won’t work.

The error I get is:

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

While waiting for element with locator - Locator: By(css selector, .toggle-summary-button)

Hybrid app changes

The application seems to run fine, and both AngularJS and Angular components are working as expected. The changes I made in the bootstrapping process are:

1 Removed ng-app from html tag:

<html lang="en" *ng-app="myapp">

2 Added an AppModules (@NgModule) etc.

3 Used NgUpgrade to bootstrap the app:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['myapp'], {strictDi: true});
});

Protractor tests

Based on the error above, the problem seems to be related to whatever Protractor does when it is waiting for Angular. I have a beforeEach block which loads the login page, fills in the details and logs in. Weirdly it is still opening the page and entering text into the username field, but then it fails to go any further.

I have tried, with no success:

  • adding “rootElement: ‘body’” to my protractor config file
  • adding “ng12Hybrid: true” to my protractor config file - I get a message saying that it should no longer be needed as it auto detects.
  • increasing the allScriptsTimeout setting from 11000 to 60000 and it still times out.
  • turning off the waitForAngularEnabled setting. This solves the problem with the login fields, but then none of my http mocks work and the tests fail.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:13
  • Comments:51 (10 by maintainers)

github_iconTop GitHub Comments

12reactions
vikermancommented, Oct 17, 2017

Hi - we are working on a change to let you configure which tasks Protractor waits for, that can help you handle the above issue. This is a broad change involving Zone.js and Angular and don’t have specific ETA(will be in the order of weeks). Will update on progress here.

9reactions
tonybranfortcommented, Mar 18, 2018

From: Castaway(s?) on Island of AngularJS stranded by Protractor Issue #4290 To: @vikerman @juliemr

Ahoy! Could we get an update on this issue? Last update on Oct 16 was an ETA in the “order of weeks”. Or, please close this issue so we can move on.

These are the rafts I’m currently considering:

  • Replace all angular-ui-bootstrap / ui-select. This is significant for me. It needs to be done anyway but my concern is that something else will pop up and I’ll still be stuck on AngularJS after that work. Lesson learned : wrap 3rd party components with my own components.
  • waitForAngularEnabled(false) for all tests as suggested by @vladotesanovic. I’m skeptical of this for an entire app but I haven’t tested it. I use waitForAngularEnabled in only one situation now and only for a very specific case.
  • Upgrade the entire app to Angular rather than AngularJS/Angular side by side incremental migration: Nope, just not an option with my resources.
  • Migrate to Vue or React instead of Angular. High on the list especially considering both can coexist with AngularJs.
  • Move to Puppeteer and ditch all Protractor tests - This is likely strategic direction.
  • OR a fix from #4290 and I can uncomment those few lines needed to start using ngUpgrade 😃
Read more comments on GitHub >

github_iconTop Results From Across the Web

angularjs - Using protractor with ng-upgrade - Stack Overflow
I am working on migrating my AngularJS (1.6) app to Angular (4) and now have a hybrid application, bootstrapped with NgUpgrade. However, this ......
Read more >
AngularJS: Error Reference: btstrpd
Occurs when calling angular.bootstrap on an element that has already been bootstrapped. This usually happens when you accidentally use both ng-app and ...
Read more >
cannot find module 'protractor' or its corresponding type ...
module.ts:1:31 - error TS2307: Cannot find module '@angular/platform-browser' or its corresponding type declarations. 1 import { BrowserModule } from '@angular/ ...
Read more >
Upgrading from AngularJS to Angular
The upgrade module in Angular has been designed to make incremental ... To bootstrap a hybrid application, you must bootstrap each of the...
Read more >
Why I Moved from Protractor to Cypress and the 7 Steps to ...
Have you ever seen Protractor fail and being confused from the error message why ... Let's look at how we can start using...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found