Protractor 3.1.1 + Angular2: Could not find testability for element

Question

I am running a simple HelloWorld sample with Protractor 3.1.1 and Angular2, but this thing keeps telling me Could not find testability for element. I googled the Internet for some information about the error, but no luck, it seems to be a new sort of exception that not so many have faced.

This is the component I'm using:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>' +
    '<h2>{{myName}}</h2>' +
    '<input id="someId" [(ngModel)]="myName"/>'
})
export class AppComponent {
    myName = 'Joe';
}

This is the Protractor config file:

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    'e2e/*.js'
  ],
  baseUrl: 'http://localhost:3000'
};

And this is the Protractor scenario I am running:

describe('angularjs homepage', function() {
    it('should say my name', function() {
        browser.get('/index.html');
        var greeting = element(by.id('someId'));
        expect(greeting.getAttribute('value')).toEqual('Joe');
    });
});

The webpage loads normally with the template HTML rendered, but Protractor thinks the resulting webpage is not an Angular webpage, now, why is that? And obviously, if I inspect the resulting webpage, it is only the resulting HTML of the processed Angular code, am I doing something wrong?

This is the complete error:

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

If I run a simple test as the Protractor Tutorial says, using this demo page: http://juliemr.github.io/protractor-demo/, it works as expected, so something has my Angular2 code that the Protractor is not working with it, but I already ran out of ideas, any one knows what is happening?

UPDATE 23-02-2016

After some research I found that to use Protractor with Angular2, there must be an additional configuration line in the config file:

useAllAngular2AppRoots: true

such that conf.js now looks like:

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    'e2e/*.js'
  ],
  baseUrl: 'http://localhost:3000',
  useAllAngular2AppRoots: true
};

or include the app root explicitly with:

rootElement: 'my-app'

After this update all calls to find an element by.id() work OK, but if you pretend to use any of the locators by.model() or by.binding(), it will simply fail with the message UnknownError: unknown error: angular is not defined. No idea why.

Answer 1

Apparently there is a bug in that commit. Check this!.

But for now you can run your tests using browser.executeScript('window.name = "NG_ENABLE_DEBUG_INFO!"');