赶上Pro或我如何创建Angular Demo之类的Angular模板错误


尽管我的活动根据我的日常工作量而有所不同,但我还是认为自己是StackOverflow的活跃用户。 我喜欢用有角度的标签回答问题,并且我总是尝试创建一些可行的示例来证明我回答的正确性。

为了创建角度演示,我通常使用plunker或stackblitz甚至jsfiddle。 我都喜欢它们,但是当我遇到一些错误时,我想拥有更多可用的工具来了解正在发生的事情。

许多在stackoverflow上提问的人都不想隔离问题并准备最少的复制,因此通常会将所有代码发布到SO上。 它们也往往不准确,并且在模板语法中会犯很多错误。 为了不浪费大量时间调查错误的出处,我尝试创建一种工具来帮助我快速找到导致问题的原因。

角度演示转轮

用于构建演示的在线角度编辑器。

ng-run.com

让我表明我的意思…


模板解析器错误

有些模板解析器错误很容易被stackblitz捕获

它给了我一些信息,但我希望突出显示错误

ng-run示例

它也可以在ts文件中使用

运行时错误

当stackblitz捕获所有模板解析器错误时,我必须打开DevTools Console来捕获所有其他运行时错误。 甚至我可以看到错误,我也怀疑它的含义以及它的来源。

让我们从模板中的简单表达式开始:

{{ x.name }}

如果我们能看到它会更好

ng-run示例

我经常处理动态组件的创建,就像许多人会忘记将组件添加到entryComponents数组一样

执行事件处理程序期间可能会发生一些错误

ng-run示例

ExpressionChangedAfterItHasBeenCheckedError

虽然这类功能要求

  • 使用ExpressionChangedAfterItHasBeenCheckedError显示更多详细信息
  • 功能 修复(核心):将绑定名称添加到错误消息“表达式,检查后更改”
  • 功能2壮举(核心):将表达式名称添加到ExpressionChangedAfterItHasBeenCheched

不支持,但我现在可以获得更多详细信息。

更新:自angular 5.2.3起,我们可以看到绑定名称https://github.com/angular/angular/commit/2af19c96f215794260c22057f0f9b9a93cccdb00,但内插值不存在)

这是一个简单的示例:

我们还看一下路由示例:

再举一个例子

还有一些功能可以帮助我快速构建演示:

  • 集成的Angular语言服务 (语法诊断和html补全)
  • Angular CLI生成器,用于组件,服务,指令,管道模块
  • 自动导入
  • 转到定义
  • Emmet在CSS和HTML中(包括嵌入式模板)
  • 内联角度模板的语法高亮显示,完成和格式化
  • 将布局分为两部分
  • 预定义模板
  • 很多主题
  • 片段( angc angd

感谢收看:)

角度演示转轮

用于构建演示的在线角度编辑器。

ng-run.com