Angular2 with jQuery and Foundation.js
<p>I have setup a basic Angular2 Auth0 with JWT integration and now I'd like to use Foundation with jQuery as a dependency.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="nl"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;App&lt;/title&gt;

    &lt;!-- Latest compiled and minified CSS from zurb. --&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css"&gt;

     &lt;!-- Auth0 Lock script --&gt;
    &lt;script src="http://cdn.auth0.com/js/lock/10.0.0/lock.min.js"&gt;&lt;/script&gt;
    &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;

    &lt;script
              src="https://code.jquery.com/jquery-2.2.4.js"
              integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
              crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>There seems to be a problem though, because the title bar is unfolded, like jQuery doesn't work or isn't integrated.</p>

<pre><code>&lt;div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium"&gt;
  &lt;button class="menu-icon" type="button" data-toggle&gt;&lt;/button&gt;
  &lt;div class="title-bar-title"&gt;Menu&lt;/div&gt;
&lt;/div&gt;

&lt;div class="top-bar" id="example-menu"&gt;
  &lt;div class="top-bar-left"&gt;
    &lt;ul class="dropdown menu" data-dropdown-menu&gt;
      &lt;li class="menu-text"&gt;Site Title&lt;/li&gt;
      &lt;li class="has-submenu"&gt;
        &lt;a href="#"&gt;One&lt;/a&gt;
        &lt;ul class="submenu menu vertical" data-submenu&gt;
          &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="top-bar-right"&gt;
    &lt;ul class="menu"&gt;
      &lt;li&gt;&lt;input type="search" placeholder="Search"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button type="button" class="button"&gt;Search&lt;/button&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>All I seem to be getting is the following screenshot:
<a href="https://i.stack.imgur.com/XkmR2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XkmR2.png" alt="Live screenshot"></a></p>