Protractor: Testing hybrid Angular 1+2 app always fail

Created on 16 Feb 2016 · 10Comments · Source: angular/protractor

Protractor works well on Angular 1 but after upgrading my app to an hybrid Angular 1+2 I get this error:

Failed: Error while waiting for Protractor to sync with the page: "[ng:test] no injector found for element argument to getTestability http://errors.angularjs.org/1.4.9/ng/test"

_It seems a common error when you don't have a ng-app tag <div ng-app=myAppManager"> in your Angular 1 app and can be easily fixed with rootElement : 'html' in your protractor config file but it doesn't seem to change anything on hybrid app._

I tried rootElement : 'html' or even useAllAngular2AppRoots: true.

I heavily suspect the problem comes from the asynchronous loading of the hybrid angular (from the upgrade doc):

One notable difference between angular.bootstrap and upgradeAdapter.bootstrap is that the latter works asynchronously. This means that we cannot assume that the application has been instantiated immediately after the bootstrap call returns.

my config file:

exports.config = {
    framework: 'jasmine2',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['protractor.js'],
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 50000,
    },
    allScriptsTimeout: 50000,//seb
    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            'prefs': {
                'profile.managed_default_content_settings.notifications':2
            }
        }
    },
    rootElement : 'html',
    // useAllAngular2AppRoots: true,
    jasmineNodeOpts: {
        realtimeFailure: true
    },
    onPrepare: function() {
      var failFast = require('jasmine-fail-fast');
      jasmine.getEnv().addReporter(failFast.init());
    }
}

external bug filed

Source

sebhorin

👍1

Most helpful comment

All the little pieces needing to be fixed for this are now done - see our example against a hybrid app here: https://github.com/angular/protractor/blob/master/spec/hybrid/async_spec.js#L3

Note that this will only work with a recent version of Angular2 and with zone.js 0.6.25 or higher.

juliemr on 20 Sep 2016

👍2

All 10 comments

I'm unfamiliar with hybrid angular, could you provide a small reproducible example that we can use to investigate?

NickTomlin on 16 Feb 2016

Sure! This is a simple hybrid app, do you need anything else?:
http://plnkr.co/edit/P4H8eUQvQeTZRJHi3g10?p=preview

A hybrid app is actually an Angular 1 app that can read angular 2 components. There is no big change from Angular 1 app expect the app bootstrapping:

import {UpgradeAdapter} from 'angular2/upgrade';
/* . . . */
const upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});

instead of having <body ng-app="heroApp" > or angular.bootstrap(document.body, ['heroApp'], {strictDi: true});.

The hybrid bootstraping is asynch, I guess it's the problem..

sebhorin on 16 Feb 2016

Unfortunately, this is a known issue. We plan on adding support for hybrid apps soon, though.

heathkit on 17 Feb 2016

👍1

Fixed with https://github.com/angular/angular/pull/7603

If you need a work around _now_ you can use the version of upgrade.js from that PR, but I'd recommend waiting for real support. Angular releases pretty often

sjelin on 15 Mar 2016

@sjelin I am still running into issues with this on NG2 RC1. @sebhorin did this resolve your issue?

bringking on 24 May 2016

@bringking I havn't set it up yet ..

sebhorin on 24 May 2016

Hello everyone,

I ran in a similar issue,
I'm trying to run a testing scenario:

Starting from an angular 1.5 app, I am redirected to an angular 2 app. I can't get the config file to work properly.
if I use :

useAllAngular2AppRoots: true

My tests on the angular1 app fails with:

    Failed: Cannot assign to read only property 'stack' of Error while waiting for Protractor to sync with the page: "window.getAllAngularTestabilities is not a function"

and if I don't, my test on the ng2 app fails with:

Failed: Error while waiting for Protractor to sync with the page: "Could not find testability for element."

I need to keep all tests with the same protractor conf, because I cannot predict the url I'll be redirected to (It is a signed url generated by a server when I click on a button in the angular 1.5 app)

Do you guys have any idea how I could get this working ?

Thank you in advance,