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