Angular 4.3.1 в Safari iOS 10.3.4: TypeError null не является объектом (вычисление 'n[o].outlets')
Я работаю над приложением Angular 4.3.1. Приложение работает в основном нормально, за исключением браузера Safari на iOS 10.3.2.
У меня установлено программное обеспечение для отслеживания ошибок "Sentry", и я старался изо всех сил, чтобы разобраться в двух проблемах, представленных там. Я прошу подсказки или советы о том, как расследовать дальше.
Я стараюсь предоставить как можно больше подробностей.
Имена ошибок:
TypeError/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js in Ct
error null is not an object (evaluating 'n[o].outlets')
Error/app/polyfills.473d66a7973dfd05d135.bundle.js in g
error Uncaught (in promise): TypeError: null is not an object (evaluating 'n[o].outlets') Ct@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185868 https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185302 d@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:175024 Ot@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185267 ft@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:183155 updateTargetUrlAndHref@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:232259 https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:231328 __tryOrUnsub@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389719 next@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389005 _next@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:388051 next@https://www.example.com/app/vendor.6a2c8d7c7cab...
Детали устройства:
browser: Mobile Safari 10.0
browser.name: Mobile Safari
device: iPhone
device.family: iPhone
level: error
logger: javascript
os: iOS 10.3.2
os.name: iOS
События (от первого до последнего):
navigation to #/ from /app/#/app/account 15:04:25
xhr GET https://www.example.com/api/config [200] 15:04:25
navigation to [Filtered] from #/ 15:04:30
ui.click input#email.form-control.ng-untouched.ng-pristine.ng-invalid[type="email"] 15:04:31
ui.input input#email.form-control.ng-untouched.ng-pristine.ng-invalid[type="email"] 15:04:36
ui.click [Filtered] 15:04:37
ui.input [Filtered] 15:04:38
ui.click div.text-center > button.btn.btn-fill.btn-primary[type="submit"] 15:04:39
xhr POST [Filtered] [200] 15:04:39
sentry QuotaExceededError: The quota has been exceeded. 15:04:39
xhr GET https://www.example.com/api/users/1 [200] 15:04:39
navigation to #/app/home from [Filtered] 15:04:39
sentry TypeError: null is not an object (evaluating 'n[o].outlets') 15:04:44
ui.click div.navbar-header > button.navbar-toggle[type="button"] > span.icon-bar 15:04:45
ui.click div.nav-container > ul.nav > li > a > p 15:04:45
navigation to #/app/account from #/app/home 15:04:45
exception Error: Uncaught (in promise): TypeError: null is not an object (evaluating 'n[o].outlets')
Ct@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185868
https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185302
d@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:175024
Ot@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185267
ft@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:183155
updateTargetUrlAndHref@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:232259
https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:231328
__tryOrUnsub@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389719
next@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389005
_next@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:388051
next@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:387723
next@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:726591
https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:221087
onInvoke@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:12362
run@https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:51145
https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:48117
onInvokeTask@https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:12278
runTask@https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:51834
u@https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:46666
invoke@https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:57925
Package.json
{
"name": "md-angular-cli-pro",
"version": "1.4.4",
"license": "http://md-pro-angular.creative-tim.com/documentation/tutorial",
"repository": {
"type": "git",
"url": "https://github.com/creativetimofficial/material-dashboard-pro-angular.git"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.0",
"@angular/animations": "4.3.1",
"@angular/cdk": "2.0.0-beta.10",
"@angular/common": "4.3.1",
"@angular/compiler": "4.3.1",
"@angular/core": "4.3.1",
"@angular/forms": "4.3.1",
"@angular/http": "4.3.1",
"@angular/material": "2.0.0-beta.10",
"@angular/platform-browser": "4.3.1",
"@angular/platform-browser-dynamic": "4.3.1",
"@angular/platform-server": "4.3.1",
"@angular/router": "4.3.1",
"@ngrx/effects": "^4.1.1",
"@ngrx/router-store": "^4.1.1",
"@ngrx/store": "^4.1.1",
"@ngrx/store-devtools": "^4.1.1",
"angular2-material-datepicker": "0.5.0",
"animate.css": "3.5.2",
"arrive": "2.3.1",
"bootstrap": "3.3.5",
"bootstrap-material-design": "0.5.10",
"bootstrap-notify": "3.1.3",
"bootstrap-select": "1.12.2",
"bootstrap-tagsinput": "0.7.1",
"chartist": "0.9.4",
"chartist-plugin-zoom": "0.4.0",
"core-js": "2.4.1",
"datatables": "1.10.12",
"datatables.net-bs": "1.10.12",
"datatables.net-responsive": "2.1.1",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"font-awesome": "^4.7.0",
"fullcalendar": "3.4.0",
"googleapis": "19.0.0",
"hammerjs": "^2.0.8",
"jasny-bootstrap": "3.1.3",
"jquery": "1.12.4",
"jquery-validation": "1.17.0",
"jvectormap": "2.0.4",
"lodash": "^4.17.4",
"moment": "2.18.1",
"moment-timezone": "0.4.0",
"ng2-nouislider": "1.6.1",
"ng2-select": "1.2.0",
"ngx-chips": "1.4.6",
"nouislider": "9.2.0",
"perfect-scrollbar": "0.8.1",
"pusher-js": "^4.2.2",
"raven-js": "^3.21.0",
"rxjs": "5.4.2",
"sweetalert2": "6.10.1",
"twitter-bootstrap-wizard": "1.2.0",
"uglify-js": "1.3.5",
"validate": "3.0.1",
"web-animations-js": "2.2.2",
"zone.js": "0.8.4"
},
"devDependencies": {
"@angular/cli": "1.4.2",
"@angular/compiler-cli": "4.3.1",
"@types/bootstrap": "3.3.32",
"@types/chartist": "0.9.34",
"@types/jasmine": "2.5.38",
"@types/jquery": "1.10.31",
"@types/node": "6.0.73",
"codelyzer": "2.0.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "0.2.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.0",
"ts-node": "2.0.0",
"tslint": "4.5.0",
"typescript": "2.4.2"
}
}
Мои мысли до сих пор:
После удаления еще нескольких ошибок, характерных для этой версии iOS (например, неработающий канал для дат), я пришел к выводу, что это может быть проблема совместимости, связанная с версией браузера. В частности, я полагаю, что проблема связана с тем, как angular обрабатывает маршрутизацию (я получаю это из имени проблемы 'n [o].outlets', как в роутер-выходах, и того факта, что это происходит после действия навигации, как вы можете видеть в список событий), но это действительно все, что я мог понять до сих пор.
Кстати, ошибка QuotaExceededError связана с проверкой доступности localStorage (чего в данном случае нет).
Спасибо
Высоко ценится даже маленький намек на то, как решить эту проблему, или хотя бы пролить некоторый свет на дело. Большое спасибо.
1 ответ
null не является объектом (оценивает '$scope.userprofile.wallet_provider.toLowerCase')
Я использую, чтобы столкнуться с той же самой проблемой, но я решаю ее, проверяя if / else, так что просто найдите код и вставьте проверку в него. например:
if($scope.userprofile.is_prepaid && **<Put check here>**
$scope.userprofile.wallet_provider.toLowerCase() == "del-miles"){
if(!$scope.group_menu[4]['submenu'][1] || $scope.group_menu[4]['submenu'][1].link !== miles_menu_element.link)
$scope.group_menu[4]['submenu'].splice(1,0,miles_menu_element);
}
Так что я сделаю одну проверку "$scope.userprofile.wallet_provider"