Jquery not working in angular 4+ while using semanti-ui

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.

My html code:

<div class="ui selection dropdown field">
<input type="hidden" name="operator">
<i class="dropdown icon"></i>
<div class="default text">+</div>
<div class="menu">
  <div class="item" data-value="0">+</div>
  <div class="item" data-value="1">-</div>
  <div class="item" data-value="2">*</div>
  <div class="item" data-value="3">/</div>
</div>

my app.component:

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();
  }
}

My angular-cli :

"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"
  ],

My error :

Please help

EDIT-1 : Package.json :

{
  "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"
    }
 }

Step 1: install types for jquery

npm install @types/jquery --save

Step 2: change your jquery import

From this:

import * as $ from 'jquery';

to this:

import 'jquery';

Step 3: Change your dropdown() call

From this:

ngOnInit(): void {
    $('.ui.dropdown').dropdown();
  }

to this:

ngOnInit(): void {
    (<any>$('.ui.dropdown')).dropdown();
  }

You should have following imports for styles and scripts in your .angular-cli.json:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/semantic-ui/dist/semantic.min.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/semantic-ui/dist/semantic.min.js"
],

Now that should be work.

Here is github repository of my local working example. Check out and try.