jquery loading issue in angular 2
<p>I am new to angular 2. Currently I am facing the issue with loading of jQuery in my app. </p>

<p>Here is my example code.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;Jobkeeper&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="app/style.css" /&gt;
    &lt;link rel="stylesheet" href="app/forms.css" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/font-awesome.min.css"&gt;
     &lt;link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/bootstrap.min.css"&gt;
     &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css"&gt;
     &lt;link href="app/assets/frontend/custom/css/owl.carousel.css" rel="stylesheet"&gt;
     &lt;link href="app/assets/frontend/custom/css/owl.theme.css" rel="stylesheet"&gt;
     &lt;link href="app/assets/frontend/custom/css/owl.transitions.css" rel="stylesheet"&gt;
     &lt;link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/main.css"&gt;
     &lt;link href='https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,900' rel='stylesheet' type='text/css'&gt;
     &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300,600italic' rel='stylesheet' type='text/css'&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script data-turbolinks-track="true" src="app/assets/frontend/custom/js/bootstrap.min.js"&gt;&lt;/script&gt;
     &lt;script data-turbolinks-track="true" src="app/assets/frontend/custom/js/jquery.toaster.js"&gt;&lt;/script&gt;
    &lt;script data-turbolinks-track="true" src="app/assets/frontend/custom/js/jquery.toaster.config.js"&gt;&lt;/script&gt;    

    &lt;!-- 1. Load libraries --&gt;
    &lt;!-- Polyfill(s) for older browsers --&gt;
    {{ Html::script('core-js/client/shim.min.js') }}
    {{ Html::script('zone.js/dist/zone.js') }}
    {{ Html::script('reflect-metadata/Reflect.js') }}
    {{ Html::script('systemjs/dist/system.src.js') }}
    {{ Html::script('systemjs.config.js') }}

    &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
&lt;/head&gt;
&lt;!-- 3. Display the application --&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;

&lt;script src="app/assets/frontend/custom/js/owl.carousel.js"&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {

        var owl = $("#owl-demo");

        owl.owlCarousel({

            // Define custom and unlimited items depending from the width
            // If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
            // For better preview, order the arrays by screen size, but it's not mandatory
            // Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
            // In the example there is dimension with 0 with which cover screens between 0 and 450px

            itemsCustom: [
                [0, 1],
                [450, 1],
                [600, 2],
                [700, 2],
                [1000, 3],
                [1200, 4],
                [1400, 6],
                [1600, 6]
            ],
            navigation: true

        });
    });
&lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p></p>

<p>When I load/refresh the page, the owl carowsel not initialising because the jQuery is not loading on that time.</p>

<p><em>I have did some possible solutions:-</em></p>

<blockquote>
  <ol>
  <li>I have placed the jquery(owl carowsel code) in angular footer directive.</li>
  <li>Aslo I have import the jquery file in app.module.ts but it was not working.</li>
  </ol>
</blockquote>

<p>So how it could be work. Please let me know.</p>