Angular 7中html页面中嵌入的Typescript提供更好的错误消息

在Angular 7的html页面中嵌入TypeScript时，我们经常会收到无法使用的错误消息，例如：

TypeError:无法读取未定义的属性“PersonName” core.js:15724消息：“无法读取未定义的属性'PersonName'” 堆栈：“TypeError:无法读取未定义的属性'PersonName'。\n

在xxxx.push../xxxx/person.component.ts .pages.setupDefaultValues（）\n

在xxx处按../xxxx/person.component.ts.ngonit （）\n

根本原因是：html页面中嵌入的TS引用了空值

问题是：这在哪一行？在这个简单的例子中，很容易找到PersonName的位置，但其他例子就不那么简单了

我知道这个问题可以通过改变来回避

<h2>{{ page.PersonName }} </h2>

{{page.PersonName}

到

{{page？.PersonName}

但这只是掩盖了错误

我要找的是：

一种设置错误处理程序的方法，它将告诉我 发生错误

如何启用一个更好的错误消息，我可以使用它来确定html文件中的行号

这是在禁用--aot和--prod的情况下编译的

有什么想法吗

更新：

我发现这篇有趣的文章

这说明了作者是如何实现一个能够提供更好信息的系统的，但我不知道如何将其外推到我的问题上

一件有用的事情是使用Angular语言服务

它提供了一个VScode插件，为html文件中的TS提供intelesense

一旦启用，它将识别在我的html中引用的缺失变量

本页总结了大量的TypeScript错误，并提供了一些修复方法，但对我的错误没有帮助

---

使用Angular语言服务是我发现的唯一技术。它会在VSCode中给你一个红色的曲线

---

但是它还有很多需要改进的地方。

通常我使用带有

*ngIf

的容器，就像下面的

所有其他东西一样

<h2>{{ page?.PersonName }} </h2>