title: ProtractorJS Timeout on clicking element, any suggestions?
body: <p><strong>The Problem</strong></p>
  
  <p>I have a simple 'New Booking' button I wish to click. As shown below</p>
  
  <pre><code>&lt;button _ngcontent-c9="" class="mat-menu-item" mat-menu-item="" role="menuitem" routerlinkactive="menu-highlight-item-left" tabindex="0" ng-reflect-router-link="/booking,create" ng-reflect-router-link-active="menu-highlight-item-left" aria-disabled="false"&gt;
      New Booking
  &lt;div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"&gt;
  &lt;/div&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>Something to Note</strong></p>
  
  <p>This is a Material 2 Angular 5 Application, so every page uses and functions off of Angular.</p>
  
  <p>In the past, the code I will provide further down had worked 100% every single time I ran the test without fail, which leads me to believe something else in the source code may be what causing this issue. However no additional load/spinners or popups are in the way</p>
  
  <p>It has absolutely no unique attributes whatsoever, no surrounding
  divs with IDs to attach to or any other way of grabbing the element.
  However using my knowledge of XPath, despite the problem I managed
  to find a unique locator which I believe works, as shown below.</p>
  
  <pre><code>var btnNewBooking = element(by.xpath("//*[text()='New Booking']"));
  </code></pre>
  
  <p>I know for a fact this should grab the element, because when I query the xpath through the ChromeDevTools it highlights the element.</p>
  
  <p><strong>The Code that originally worked</strong></p>
  
  <pre><code>var btnNewBooking = element(by.xpath("//*[text()='New Booking']"));
  btnNewBooking.click();
  </code></pre>
  
  <p><strong>The Exception produced from the ProtractorJS Console</strong></p>
  
  <pre><code>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(xpath, //*[text()='New Booking'])
  </code></pre>
  
  <p><strong>What i've tried so far?</strong></p>
  
  <p>I've tried using Protractors built in Expected Conditions from the API Library they have provided this includes all of these:</p>
  
  <p>1) Waiting Until the Presence of the element</p>
  
  <pre><code>var EC = protractor.ExpectedConditions;
  // Waits for the element with id 'abc' to be present on the dom.
  browser.wait(EC.presenceOf($('#abc')), 5000);
  </code></pre>
  
  <p>2) Waiting Until the Visibility of the element</p>
  
  <pre><code>EC = protractor.ExpectedConditions;
  // Waits for the element with id 'abc' to be visible on the dom.
  browser.wait(EC.visibilityOf($('#abc')), 5000);
  </code></pre>
  
  <p>3) Waiting until the clickability of the element</p>
  
  <pre><code>var EC = protractor.ExpectedConditions;
  // Waits for the element with id 'abc' to be clickable.
  browser.wait(EC.elementToBeClickable($('#abc')), 5000);
  </code></pre>
  
  <p>I've also tried using Angular's own waits such as:</p>
  
  <pre><code>browser.WaitForAngular();
  </code></pre>
  
  <p>and also</p>
  
  <pre><code>browser.WaitForAngularEnabled();
  </code></pre>