Angular2 TypeError: e(…).daterangepicker is not a function

Question

I have an issue with Bootstrap daterangepicker using this wrapper for Angular2: https://www.npmjs.com/package/angular2-daterangepicker

I included required scripts and stylesheet in html and declared DateRangePickerDirective in a module.

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

Everything works fine in initial angular-cli project, but I can't move this solution to our enterprise project, when page with picker loads I get error:

TypeError: e(...).daterangepicker is not a function
    at DateRangePickerDirective.ngOnInit (index.js:20)
    at AppView._View_DaterangepickerComponent0.detectChangesInternal (DaterangepickerComponent.ngfactory.js:50)
    at AppView.detectChanges (view.js:272)
    at AppView.detectViewChildrenChanges (view.js:298)
    at AppView._View_RequestComponent0.detectChangesInternal (RequestComponent.ngfactory.js:360)
    at AppView.detectChanges (view.js:272)
    at AppView.detectViewChildrenChanges (view.js:298)
    at AppView.detectChangesInternal (view.js:283)
    at AppView.detectChanges (view.js:272)
    at AppView.detectContentChildrenChanges (view.js:290)

Here is function which causes exception:

DateRangePickerDirective.prototype.ngOnInit = function () {
        $(this.elementRef.nativeElement)
            .daterangepicker(this.options, this.dateCallback.bind(this));
    };

In addition, if I place a breakpoint on this line and evaluate it in browser console, It works, component loads. I'm new to Angular and little confused with it, maybe something wrong with versions of our libraries? Here is our package.json:

{
  "name": "...",
  "version": "0.0.0",
  "license": "...",
  "scripts": {
    "clean": "rimraf node_modules doc dist vendor && npm cache clean",
    "clean-install": "npm run clean && npm install",
    "clean-start": "npm run clean-install && npm start",
    "watch": "webpack --watch --progress --profile",
    "build": "rimraf dist && webpack --progress --profile --bail",
    "server": "webpack-dashboard -- webpack-dev-server --inline --port 8080",
    "lint": "tslint --force \"src/**/*.ts\"",
    "pretest": "npm run lint",
    "test": "karma start",
    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
    "test-watch": "karma start --no-single-run --auto-watch",
    "docs": "typedoc --options typedoc.json src/app/app.component.ts",
    "start": "npm run server",
    "start:hmr": "npm run server -- --hot",
    "postinstall": "gulp gentelella",
    "preinstall": "npm config set https-proxy=http://... && npm config set proxy=http://..."
  },
  "dependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.1",
    "@types/lodash": "^4.14.37",
    "angular2-datatable": "^0.5.1",
    "angular2-daterangepicker": "0.0.5",
    "bootstrap": "^3.3.7",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-timepicker": "^0.5.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.6.3",
    "gentelella": "1.3.0",
    "lodash": "^4.16.4",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-cookies": "^1.0.2",
    "ng2-datetime": "^1.2.1",
    "ng2-translate": "^3.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/core-js": "^0.9.0",
    "@types/jasmine": "^2.2.29",
    "@types/jquery": "^2.0.33",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.44.26",
    "angular2-router-loader": "^0.3.2",
    "angular2-template-loader": "^0.4.0",
    "autoprefixer": "^6.3.2",
    "awesome-typescript-loader": "^2.2.4",
    "codelyzer": "0.0.26",
    "copy-webpack-plugin": "^3.0.0",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.8.1",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^2.4.0",
    "json-loader": "^0.5.3",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.3",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-remap-istanbul": "0.2.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.4.2",
    "null-loader": "0.1.1",
    "phantomjs-prebuilt": "^2.1.4",
    "postcss-loader": "^0.13.0",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.4",
    "rimraf": "^2.5.1",
    "shelljs": "^0.7.0",
    "style-loader": "^0.13.0",
    "ts-helpers": "^1.1.1",
    "tslint": "^3.4.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.4.4",
    "typescript": "2.0.2",
    "url-loader": "^0.5.6",
    "webpack": "^2.1.0-beta.25",
    "webpack-dashboard": "^0.1.8",
    "webpack-dev-server": "^2.1.0-beta.8",
    "webpack-merge": "^0.14.1",
    "jquery": "^3.1.1"
  }
}

Any clue what could be the cause?

UPD: Also noticed, when it's not working, the previously mentioned function called twice and call stack differs from case when everything is Ok. Call stacks: starting from left: wrong call no error, wrong call with error, ok call

Answer 1

daterangepicker dep is missing. npm install --save daterangepicker