如何调试 Angular 错误 - 错误：未捕获（承诺中）：TypeError：无法读取 null 的属性“数据”答案

【问题标题】：How to debug Angular error - Error: Uncaught (in promise): TypeError: Cannot read property 'data' of null如何调试 Angular 错误 - 错误：未捕获（承诺中）：TypeError：无法读取 null 的属性“数据”
【发布时间】：2019-06-15 20:13:46
【问题描述】：

Angular 新手，在 VS Code 中启动调试器时，我在调试控制台中收到此消息。项目中似乎一切正常，我可以登录，在网站上执行各种操作等。

我将如何调试它以找出该变量为空和/或正在使用的位置并修复它，以便我看不到此错误消息？

错误：未捕获（承诺中）：TypeError：无法读取 null 的属性“数据”

我可以从 bebugger 中看到它在 core.js: 15724 中显示了一行

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
}

这是我展开错误时在调试器中看到的内容

错误核心.js:15724 错误：未捕获（承诺中）：TypeError：无法读取 null 的属性“数据” 核心.js:15724 消息：“未捕获（承诺中）：TypeError：无法读取 null 的属性“数据”\nTypeError：无法在 AuthGuard.canActivate (http://localhost:4200/main.js:147:37) 处读取 null 的属性“数据”\n 在 http://localhost:4200/vendor.js:73690:55\n 在Observable._subscribe (http://localhost:4200/vendor.js:111951:21)\n 在 Observable._trySubscribe (http://localhost:4200/vendor.js:110290:25)\n 在 Observable.subscribe (http://localhost:4200/vendor.js:110276:22)\n 在 TakeOperator.call (http://localhost:4200/vendor.js:118625:23)\n 在 Observable.subscribe (@987654327 @)\n 在http://localhost:4200/vendor.js:121541:31\n 在 subscribeToResult (http://localhost:4200/vendor.js:121718:84)\n 在 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 …} 拒绝：TypeError：无法读取 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 在 Observable._subscribe (http://localhost:4200/vendor.js:111951:21)\n 在 Observable._trySubscribe (http://localhost:4200/vendor.js:110290:25)\n 在 Observable.subscribe (http://localhost:4200/vendor.js:110276:22)\n 在 TakeOperator.call (http://localhost:4200/vendor.js:118625:23)\n 在 Observable.subscribe ( http://localhost:4200/vendor.js:110271:22)\n 在http://localhost:4200/vendor.js:121541:31\n 在 subscribeToResult (http://localhost:4200/vendor.js:121718:84)\n 在 MergeMapSubscriber._innerSub (http://localhost:4200/vendor.js:116475:90)\n 在 resolvePromise (http://localhost:4200/polyfills.js:3189:31)\n 在 resolvePromise (http://localhost:4200/polyfills.js:3146:17)\n在http://localhost:4200/polyfills.js:3250:17\n 在 ZoneDelegate.push../node_modules... 任务：ZoneTask {_zone：区域，runCount：0，_zoneDelegates：null，...} zone:Zone {_parent: Zone, _name: "angular", _properties: Object, …} __proto:Object {constructor: , name: "Error", message: "", ...}

我知道在第一行的 auth.guard.ts 中这种方法我看到了
“firstChild”为空

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;
  }

【问题讨论】：

您可能一直在使用 'AuthGuard' 类，并且在该类中您可能根据某个值检查条件，它会抛出错误。
是的，我不确定为什么在 auth.guard.ts 中会抛出错误，但我会在上面发布代码

标签： javascript angular angular7

【解决方案1】：

您可以通过按 F12 键访问浏览器中的开发人员菜单然后转到 Sources（靠近控制台）来调试您的 Angular 错误：在那里您会找到您的 Typescript 文件，打开您想要的文件，您可以设置断点然后开始调试如图所示here，享受:)！

【讨论】：