Question

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

我将如何调试它以找出此变量为null和/或正在使用的变量并对其进行修复，以使我看不到此错误消息？

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

我从调试器中看到它在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
}

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

错误 core.js：15724 错误：未捕获（承诺）：TypeError：无法读取null的属性“ data” core.js：15724 消息：“未捕获（承诺）：TypeError：无法读取null的属性'data'\ nTypeError：无法在AuthGuard.canActivate（http://localhost:4200/main.js:147:37）\ n读取null \ n的属性'data'\ n在{{3} } \ n在Observable._subscribe（http://localhost:4200/vendor.js:73690:55）\ n在Observable._trySubscribe（http://localhost:4200/vendor.js:111951:21）\ n在Observable.subscribe（http://localhost:4200/vendor.js:110290:25）\ n在TakeOperator.call（{{3 }}）\ n在Observable.subscribe（http://localhost:4200/vendor.js:110276:22）\ n在http://localhost:4200/vendor.js:118625:23 \ n在subscribeToResult（http://localhost:4200/vendor.js:110271:22）\ n在MergeMapSubscriber._innerSub（http://localhost:4200/vendor.js:121541:31）” promise：ZoneAwarePromise { zone_symbol__state：0，__ zone_symbol__value：TypeError：无法读取属性'data'为null \ n…} reject：TypeError：无法读取null的属性“数据” 堆栈：“错误：未捕获（承诺）：TypeError：无法读取null的属性'data'\ nTypeError：无法读取AuthGuard.canActivate（http://localhost:4200/vendor.js:121718:84）\ n处null \ n的属性'data'\ { 3}} \ n在Observable._subscribe（http://localhost:4200/vendor.js:116475:90）\ n在Observable._trySubscribe（http://localhost:4200/main.js:147:37）\ n在Observable.subscribe（http://localhost:4200/vendor.js:73690:55）\ n在TakeOperator.call（{ {3}}）\ n在Observable.subscribe（http://localhost:4200/vendor.js:111951:21）\ n在http://localhost:4200/vendor.js:110290:25 \ n在subscribeToResult（http://localhost:4200/vendor.js:110276:22）\ n在MergeMapSubscriber._innerSub（http://localhost:4200/vendor.js:118625:23） \ n在resolvePromise（http://localhost:4200/vendor.js:110271:22）\ n在resolvePromise（http://localhost:4200/vendor.js:121541:31）\ n在http://localhost:4200/vendor.js:121718:84 \ n在ZoneDelegate.push ../ node_modules ... task：ZoneTask {_zone：Zone，runCount：0，_zoneDelegates：null，…} zone：Zone {_parent：区域，_name：“角度”，_properties：对象，...} __proto ：对象{构造函数：，名称：“错误”，消息：“”，...}

我在第一行的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;
  }

Answer 1

您可以通过按F12键访问ur浏览器中的开发人员菜单，然后转到Sources（在Console附近）来调试Angular错误：您将在其中找到Typescript文件，打开所需的文件，然后可以设置断点然后开始像here所示进行调试，请尽情享受:)！

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

1 个答案: