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

Question

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

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

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

我可以从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 } 

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

错误core.js：15724错误：未捕获（在承诺中）：TypeError：无法读取null core.js的属性'data'：15724消息：“未捕获（在承诺中）：TypeError：无法读取null \\ nTypeError的属性'data' ：无法在AuthGuard.canActivate（ http：// localhost：4200 / main.js：147：37 ）\\ n在http：// localhost：4200 / vendor.js：73690：55读取null \\ n的属性'data' \\ 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 at 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 ）“promise：ZoneAwarePromise { zone_symbol__state：0，__ zone_symbol__value：TypeError：Cann 读取属性'data'为null \\ n ...} rejection：TypeError：无法读取空栈的属性'data'：“错误：未捕获（在promise中）：TypeError：无法读取null的属性'data'nTypeError：无法读取属性'数据'为null \\ n在AuthGuard.canActivate（ http：// localhost：4200 / main.js：147：37 ）\\ n位于http：// localhost：4200 / vendor.js：73690：55 \\ n at Observable._subscribe（ http：// localhost：4200 / vendor.js：111951：21 ）\\ n在Observable._trySubscribe（ http：// localhost：4200 / vendor.js：110290：25 ）\\ n at Observable.subscribe（ http：// localhost：4200 / vendor.js：110276：22 ）\\ n在TakeOperator.call（ http：// localhost：4200 / vendor.js：118625：23 ）\\ n at 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 at resolvePromise（ http：// localhost：4200 / polyfills.js：3189：31 ）\\ n at resolvePromise（ HTTP：// LO calhost：4200 / polyfills.js：3146：17 ）\\ n在http：// localhost：4200 / polyfills.js：3250：17 \\ n在ZoneDelegate.push ../ node_modules ...任务：ZoneTask {_zone：Zone ，runCount：0，_zoneDelegates：null，...} zone：Zone {_ parent：Zone，_name：“angular”，_ property ：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; } 

Answer 1

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