0
我一直在使用这种包装的Angular2与引导daterangepicker一个问题：https://www.npmjs.com/package/angular2-daterangepickerAngular2类型错误：E（...）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" />
一切工作的初始角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
你确定在'ngOnInit'期间''this.elementRef.nativeElement'已经存在吗？在访问DOM元素时，“ngAfterViewInit”不是更好的钩子吗？事实上，当你停在一个断点时，它表现出竞争状态可能正在发生。 – Matey
@Matey我想是的，至少当我在调试中检查它时，它是存在的。无论如何，它发生在图书馆脚本，我不能在那里改变任何东西。我也注意到，调用堆栈在不同的情况下有所不同。为我的问题添加了屏幕截图。 – igor
检查调试不是确定竞争条件的正确方法。当您在事件中的断点处停止执行时，并行线程将填充对象，因此它不再为空。你可以在'$（this.elementRef.nativeElement）'之前插入'console.log（this.elementRef.nativeElement）'并让我们知道它打印什么？ – Matey