How to debug Angular error - Error: Uncaught (in promise): TypeError: Cannot read property 'data' of null

Question

New to Angular and while starting the debugger in VS Code I receive this in the debug console. Everything seems to be working ok in the project, I can login, perform various actions on the site, etc.

How would I go about debugging this to find out where this variable is null and/or being used and fix it so I don't see this error message?

Error: Uncaught (in promise): TypeError: Cannot read property 'data' of null

I can see from the bebugger it shows a line in core.js: 15724 that is this

 unction defaultErrorLogger(console) { var values = []; for (var _i = 1; _i < arguments.length; _i++) { values[_i - 1] = arguments[_i]; } console.error.apply(console, __spread(values)); // error from here } 

Here is what I see in the debugger when I expand the error

ERROR core.js:15724 Error: Uncaught (in promise): TypeError: Cannot read property 'data' of null core.js:15724 message:"Uncaught (in promise): TypeError: Cannot read property 'data' of null\\nTypeError: Cannot read property 'data' of null\\n at AuthGuard.canActivate ( http://localhost:4200/main.js:147:37 )\\n at http://localhost:4200/vendor.js:73690:55 \\n at Observable._subscribe ( http://localhost:4200/vendor.js:111951:21 )\\n at Observable._trySubscribe ( http://localhost:4200/vendor.js:110290:25 )\\n at Observable.subscribe ( http://localhost:4200/vendor.js:110276:22 )\\n at TakeOperator.call ( http://localhost:4200/vendor.js:118625:23 )\\n at Observable.subscribe ( http://localhost:4200/vendor.js:110271:22 )\\n at http://localhost:4200/vendor.js:121541:31 \\n at subscribeToResult ( http://localhost:4200/vendor.js:121718:84 )\\n at MergeMapSubscriber._innerSub ( http://localhost:4200/vendor.js:116475:90 )" promise:ZoneAwarePromise { zone_symbol__state: 0, __zone_symbol__value: TypeError: Cann ot read property 'data' of null\\n …} rejection:TypeError: Cannot read property 'data' of null stack:"Error: Uncaught (in promise): TypeError: Cannot read property 'data' of null\\nTypeError: Cannot read property 'data' of null\\n at AuthGuard.canActivate ( http://localhost:4200/main.js:147:37 )\\n at http://localhost:4200/vendor.js:73690:55 \\n at Observable._subscribe ( http://localhost:4200/vendor.js:111951:21 )\\n at Observable._trySubscribe ( http://localhost:4200/vendor.js:110290:25 )\\n at Observable.subscribe ( http://localhost:4200/vendor.js:110276:22 )\\n at TakeOperator.call ( http://localhost:4200/vendor.js:118625:23 )\\n at Observable.subscribe ( http://localhost:4200/vendor.js:110271:22 )\\n at http://localhost:4200/vendor.js:121541:31 \\n at subscribeToResult ( http://localhost:4200/vendor.js:121718:84 )\\n at MergeMapSubscriber._innerSub ( http://localhost:4200/vendor.js:116475:90 )\\n at resolvePromise ( http://localhost:4200/polyfills.js:3189:31 )\\n at resolvePromise ( http://lo calhost:4200/polyfills.js:3146:17 )\\n at http://localhost:4200/polyfills.js:3250:17 \\n at ZoneDelegate.push../node_modules... task:ZoneTask {_zone: Zone, runCount: 0, _zoneDelegates: null, …} zone:Zone {_parent: Zone, _name: "angular", _properties: Object, …} __proto :Object {constructor: , name: "Error", message: "", …}

I know in this method in auth.guard.ts on the 1st line I see that
"firstChild" is null

 canActivate(next: ActivatedRouteSnapshot): boolean { const roles = next.firstChild.data.roles as Array<string>; if (roles) { const match = this.authService.roleMatch(roles); if (match) { return true; } else { this.router.navigate(['members']); this.alertify.error('You are not authorized to access this area'); } } if (this.authService.loggedIn()) { return true; } this.alertify.error('You shall not pass!!!'); this.router.navigate(['/home']); return false; } 

Answer 1

您可以通过按F12键访问开发人员菜单来调试Angular错误，然后转到Sources（靠近Console）：在那里您将找到您的Typescript文件，打开您想要的文件，然后您可以设置断点然后开始调试在这里显示，享受:)！