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: Cannot 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://localhost: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;
  }

You might have been using 'AuthGuard' class and in that class you might have checking the condition based on some value, there it's throwing error. — RajuPedda
ya I'm not sure why in auth.guard.ts it's throwing an error but I'll post the code above — user1186050

AmYne Gaïeb AmYne Gaïeb · Accepted Answer · 2019-06-15T20:37:51

You can debug your Angular error by accessing developers menu in ur browser by pressing F12 key then going to Sources (near Console) : there you will find your Typescript files , open the file you want and you can set your breakpoints then start to debug like shown here , enjoy :) !

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

1 Answers