title: Protractor 3.1.1 + Angular2: Could not find testability for element
body: <p>I am running a simple HelloWorld sample with Protractor 3.1.1 and Angular2, but this thing keeps telling me <strong>Could not find testability for element</strong>. 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.</p>
  
  <p>This is the component I'm using:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'my-app',
      template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;' +
      '&lt;h2&gt;{{myName}}&lt;/h2&gt;' +
      '&lt;input id="someId" [(ngModel)]="myName"/&gt;'
  })
  export class AppComponent {
      myName = 'Joe';
  }
  </code></pre>
  
  <p>This is the Protractor config file:</p>
  
  <pre><code>exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: [
      'e2e/*.js'
    ],
    baseUrl: 'http://localhost:3000'
  };
  </code></pre>
  
  <p>And this is the Protractor scenario I am running:</p>
  
  <pre><code>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');
      });
  });
  </code></pre>
  
  <p>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?</p>
  
  <p>This is the complete error:</p>
  
  <pre><code>Error: Failed: Error while waiting for Protractor to sync with the page: "Could not find testability for element."
  </code></pre>
  
  <p>If I run a simple test as the Protractor Tutorial says, using this demo page: <a href="http://juliemr.github.io/protractor-demo/">http://juliemr.github.io/protractor-demo/</a>, 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?</p>
  
  <p><strong>UPDATE 23-02-2016</strong></p>
  
  <p>After some research I found that to use Protractor with Angular2, there must be an additional configuration line in the config file:</p>
  
  <pre><code>useAllAngular2AppRoots: true
  </code></pre>
  
  <p>such that conf.js now looks like:</p>
  
  <pre><code>exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: [
      'e2e/*.js'
    ],
    baseUrl: 'http://localhost:3000',
    useAllAngular2AppRoots: true
  };
  </code></pre>
  
  <p>or include the app root explicitly with:</p>
  
  <pre><code>rootElement: 'my-app'
  </code></pre>
  
  <p>After this update all calls to find an element <code>by.id()</code> work OK, but if you pretend to use any of the locators <code>by.model()</code> or <code>by.binding()</code>, it will simply fail with the message <code>UnknownError: unknown error: angular is not defined</code>. No idea why.</p>