title: Protractor keeps waiting on finished HTTP requests
body: <p>I have an RESTful API and now I am developing a angular2 app which uses data services to call the API. I then wanted to implement end to end tests using protractor. I wanted to start very low level, so I made tests to just check if my components are present when clicking on a link. The test looks like this:</p>
  
  <pre><code>describe('my-webclient', () =&gt; {
      it('app should load', () =&gt; {
          browser.get('/');
          expect(element(by.css('my-app')).isPresent()).toBe(true);
      });
  
      it('app should have a top navigation', () =&gt; {
          expect(element(by.css('my-nav-top')).isPresent()).toBe(true);
      });
  
      it('app should have a side navigation', () =&gt; {
          expect(element(by.css('my-nav-side')).isPresent()).toBe(true);
      });
  
      it('app should have a content', () =&gt; {
          expect(element(by.css('my-content')).isPresent()).toBe(true);
      });
  
      it('app should load the overview for route "/"', () =&gt; {
          expect(element(by.css('my-overview')).isPresent()).toBe(true);
      });
  });
  </code></pre>
  
  <p>The problem is, that the overview component makes HTTP requests in a <code>ngOnInit</code> function using some data service. Protractor will then just block forever, although the HTTP requests have been completed long ago. </p>
  
  <p>When I monitor the test, I can see how the app loads, including all the data which was fetched from my API. Then nothing happens and protractor will eventually crash, saying that the timeout was reached. </p>
  
  <p>The exact error message is:</p>
  
  <pre><code>Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md                                                                                                                                                            
  While waiting for element with locator - Locator: By(css selector, my-app)
  </code></pre>
  
  <p>While searching for help on google, I came across several hints that protractor will wait for angular to finish everything. Well, this is exactly what I want. When I monitor the network tab in chrome's developer tools (<kbd>F12</kbd>), then nothing appears shortly after the app has loaded. So there are no more pending requests or anything for protractor to wait for. Still, it does, and I just don't know why.</p>
  
  <p><strong>So, here's my question</strong>: Do I have to consider anything special when dealing with data services making HTTP requests? Or: What can I do to debug why protractor is still waiting until the timeout hits.</p>
  
  <p>By the way, it is definetly the data service. If I comment out everything inside <code>OverviewComponent::ngOnInit</code>, then the tests will pass just fine and the way I expect it.</p>