title: Adding a jQuery component to Angular 6
body: <p>I'm having problems embedding a jQuery cascading dropdown component to my Angular 6 project.  I got an error when attempting to run <code>ng serve</code>:</p>
  
  <blockquote>
    <p>Error: ENOENT: no such file or directory, open
    C:\nodeprojects\node_modules\jquery\dist\jquery.min.js.</p>
  </blockquote>
  
  <p><br>Here are the steps I took to add jQuery to Angular 6:</p>
  
  <ol>
  <li>Ran</li>
  </ol>
  
  <p><code>npm install jquery</code></p>
  
  <p>' and verified <code>jquery.min.js</code> was in that path listed above.</p>
  
  <ol start="2">
  <li><p>Modified <code>angular.json</code> (Angular 6 no longer has an 'angular-cli.json' file) and added the relative path to the <code>jquery.min.js</code> file in the 'scripts []' section.</p></li>
  <li><p>I'm using <code>app.component</code> as the target component.  In <code>app.component.ts</code>, I entered, <code>declare var $: any;</code> and entered the jquery custom component function inside <code>export class AppComponent implements OnInit()</code>.  </p></li>
  </ol>
  
  <p>The jquery component I am trying to embed into Angular is located at <a href="https://jsfiddle.net/brohjoe/zgc0n1q5/1/" rel="nofollow noreferrer">https://jsfiddle.net/brohjoe/zgc0n1q5/1/</a></p>
  
  <p>The HTML was entered into <code>app.component.html</code>. I deleted references to the script src because the minified jquery library was listed in <code>angular.json</code> as mentioned and the custom.js code was embedded in <code>app.component.ts</code> as mentioned above.</p>
  
  <p>After running localhost:4200, the only ui elements that will display are the dropdowns with no data. </p>