【发布时间】：2017-09-22 04:38:37
【问题描述】：
我在使用 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
【问题讨论】：
-
您确定
this.elementRef.nativeElement在ngOnInit期间已经存在吗？访问 DOM 元素时，ngAfterViewInit不是更好的钩子吗？当您在断点处停止时它起作用的事实表明可能正在发生竞争条件。 -
@Matey 我认为是的，它存在，至少当我在调试中检查它时。无论如何，它发生在库脚本中，我不能在那里改变任何东西。我还注意到调用堆栈在工作和不工作的情况下是不同的。为我的问题添加了屏幕截图。
-
在调试中检查不是确定竞争条件的正确方法。当您在事件中的断点处停止执行时，并行线程会填充对象，因此它不再为空。您能否在
$(this.elementRef.nativeElement)之前插入console.log(this.elementRef.nativeElement);并告诉我们它打印的内容？
标签： javascript jquery angular