title: Jquery not working in angular 4+ while using semanti-ui
body: <p>I am trying to implement semantic-ui dropdown in my angular project and I am getting an error when I click the dropdown. I have installed semantic-ui and jquery through npm and have included the scripts and styles in my angular-cli. </p>
  
  <p>My html code:</p>
  
  <pre><code>&lt;div class="ui selection dropdown field"&gt;
  &lt;input type="hidden" name="operator"&gt;
  &lt;i class="dropdown icon"&gt;&lt;/i&gt;
  &lt;div class="default text"&gt;+&lt;/div&gt;
  &lt;div class="menu"&gt;
    &lt;div class="item" data-value="0"&gt;+&lt;/div&gt;
    &lt;div class="item" data-value="1"&gt;-&lt;/div&gt;
    &lt;div class="item" data-value="2"&gt;*&lt;/div&gt;
    &lt;div class="item" data-value="3"&gt;/&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>my app.component: </p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  
  import * as $ from 'jquery';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    ngOnInit(): void {
      $('.ui.dropdown')
         .dropdown();
    }
  }
  </code></pre>
  
  <p>My angular-cli :</p>
  
  <pre><code>"styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/semantic-ui/dist/semantic.min.css"
    ],
    "scripts": ["../node_modules/jquery/dist/jquery.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js",
      "../node_modules/semantic-ui/dist/semantic.min.js"
    ],
  </code></pre>
  
  <p>My error :
  <a href="https://i.stack.imgur.com/mnFC2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mnFC2.png" alt="Screenshot of error"></a></p>
  
  <p>Please help</p>
  
  <p>EDIT-1 : 
  Package.json : </p>
  
  <pre><code>{
    "name": "wow-some.1",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build --prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
     },
    "private": true,
    "dependencies": {
       "@angular/animations": "^5.2.0",
       "@angular/common": "^5.2.0",
       "@angular/compiler": "^5.2.0",
       "@angular/core": "^5.2.0",
       "@angular/forms": "^5.2.0",
       "@angular/http": "^5.2.0",
       "@angular/platform-browser": "^5.2.0",
       "@angular/platform-browser-dynamic": "^5.2.0",
       "@angular/router": "^5.2.0",
       "bootstrap": "^4.0.0",
       "core-js": "^2.4.1",
       "jquery": "^3.3.1",
       "rxjs": "^5.5.6",
       "semantic-ui": "^2.2.13",
       "zone.js": "^0.8.19"
     },
      "devDependencies": {
      "@angular/cli": "1.6.5",
      "@angular/compiler-cli": "^5.2.0",
      "@angular/language-service": "^5.2.0",
      "@types/jasmine": "~2.8.3",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.0.1",
      "jasmine-core": "~2.8.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~2.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~4.1.0",
      "tslint": "~5.9.1",
      "typescript": "~2.5.3"
      }
   }
  </code></pre>