title: Can anyone tell me, how to use jQuery with Angular4?
body: <p>I want to user ng2-datetime in my angular project,
  the setting of package.json</p>
  
  <pre><code>- {
      "name": "angular2-quickstart",
      "version": "1.0.0",
      "scripts": {
      "postinstall": "typings install",
      "typings": "typings"
  },
      "license": "ISC",
      "dependencies": {
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "@angular/upgrade": "4.0.0",
      "angular2-moment": "^1.6.0",
      "bootstrap": "^3.3.6",
      "core-js": "^2.4.1",
      "install": "^0.10.1",
      "mydatepicker": "^2.0.26",
      "ng2-datepicker": "^1.8.3",
      "ng2-datetime": "^1.4.0",
      "ng2-translate": "^5.0.0",
      "npm": "^5.3.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "^5.2.0",
      "systemjs": "^0.19.47",
      "zone.js": "^0.8.5"
  },
      "devDependencies": {
      "@types/jquery": "^3.2.11",
      "@types/node": "^6.0.60",
      "concurrently": "^3.1.0",
      "lite-server": "^2.3.0",
      "typescript": "^2.2.2"
  }
  }
  </code></pre>
  
  <p>and tsconfig</p>
  
  <pre><code>{
      "compilerOptions": {
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      //"lib": [ "es2015", "dom" ],
      "module": "commonjs",
      "moduleResolution": "node",
      "noImplicitAny": true,
      "sourceMap": true,
      "suppressImplicitAnyIndexErrors": true,
      "target": "es5"
  
      },
      "exclude": [
      "typings/browser.d.ts",
      "typings/browser",
      "typings/main",
      "typings/main.d.ts",
      "typings/index.d.ts",
      "node_modules"
  
      ]
  }
  </code></pre>
  
  <p>I install ng2-datetime package and jquery in the node_modules
  and i install @types/jquery
  the app.module.ts is</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { Http } from '@angular/http';
  import { HttpModule } from '@angular/http';
  import { routing } from './app.routing';
  import { RouterModule, Routes } from '@angular/router';
  import { Component, ElementRef } from '@angular/core';
  
  
  import { AppComponent } from "./app.component";
  import { LoginComponent } from "./components/login/login.component";
  //import { ShowAviRoomComponent } from "./components/Reservation/show-avirooms.component";
  import { ShowUsersComponent } from "./components/user/show-users.component"
  import { EditUserComponent } from "./components/user/edit-user.component"
  import { HomeComponent } from "./components/home/home.component";
  import { ProductComponent } from "./components/product/product.component";
  import { ProductUpdateComponent } from "./components/product/product-update.component";
  import { AboutComponent } from "./components/about/about.component";
  import { SettingComponent } from "./components/setting/setting.component"
  import { UserComponent } from "./components/user/user.component";
  import { ChangePassComponent } from "./components/user/change-pass.component";
  import { HeaderComponent } from './components/layout/header.component';
  import { FooterComponent } from './components/layout/footer.component';
  import { SideNavComponent } from './components/layout/side-nav.component';
  import { SidebarComponent } from './components/layout/sidebar.component';
  import { TranslateModule } from "ng2-translate";
  import { SharedModule } from "./shared.module";
  
  import 'bootstrap/dist/css/bootstrap.css';
  import 'jquery/dist/jquery.min.js';
  import 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css';
  import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
  import 'bootstrap-timepicker/css/bootstrap-timepicker.min.css';
  import 'bootstrap-timepicker/js/bootstrap-timepicker.js';
  import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';
  
  @NgModule({
              imports: [BrowserModule, FormsModule, HttpModule, routing, NKDatetimeModule, TranslateModule.forRoot(), SharedModule.forRoot()],//NKDatetimeModule
              declarations: [AppComponent, HeaderComponent, FooterComponent,
              SideNavComponent, SidebarComponent, LoginComponent, HomeComponent, //*ShowAviRoomComponent,
              ProductComponent, ProductUpdateComponent, AboutComponent,
              SettingComponent, UserComponent, ShowUsersComponent, ChangePassComponent,
              EditUserComponent],
              bootstrap: [AppComponent]
  })
  export class AppModule {
  
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Fy1b3.png" rel="nofollow noreferrer">the error is</a>
      Error   TS2314  Generic type 'EventHandler' requires 2 type argument(s). TypeScript Virtual Projects S:\ManaraWeb\HotelProject\HotelProject\node_modules\@types\jquery\index.d.ts    4140    Active
  show in details </p>