我使用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：还注意到，当它不工作时，前面提到的两次调用函数和调用堆栈与一切都好的情况不同。调用堆栈： starting from left: wrong call no error, wrong call with error, ok call
答案 0 :(得分：1)
缺少daterangepicker dep。 npm install --save daterangepicker
