Angular2 TypeError：e（…）.daterangepicker不是一个函数

Question

我使用Angular2的包装使用Bootstrap daterangepicker时遇到问题： https ://www.npmjs.com/package/angular2-daterangepicker

我在html中包含了必需的脚本和样式表，并在模块中声明了DateRangePickerDirective。

<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" />

在初始angular-cli项目中一切正常，但是当带有选择器加载的页面出现错误时，我无法将此解决方案移至我们的企业项目。

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)

这是导致异常的函数：

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

另外，如果我在此行上放置一个断点并在浏览器控制台中对其进行评估，则它会起作用，组件会加载。 我是Angular的新手，对此有点困惑，也许我们的库版本有问题？ 这是我们的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"
  }
}

任何线索可能是什么原因？

UPD：还注意到，当它不起作用时，前面提到的函数调用了两次，并且调用堆栈与一切正常时的情况有所不同。 呼叫堆栈： 从左开始：错误呼叫没有错误，错误呼叫有错误，正常呼叫

Answer 1

daterangepicker dep丢失。 npm install-保存daterangepicker