angular - 为什么 Angular 元素会吞咽错误？

Question

我在一个 Angular 项目中有最简单的 Angular 元素。我在属于 Angular 元素的组件中抛出错误，如下所示:

dashboard-tile.component.ts用户为 <dashboard-tile a="100" b="50" c="25"></dashboard-tile>在 index.html

ngOnInit() {
    throw "this is an error";
  }

但我在 chrome 控制台中没有看到任何错误。有人可以请教吗？

链接到 video .链接到 github repo包含代码。

编辑:

测试:

1. 我已经在 chrome 和 firefox 中对其进行了测试。它在两者中都是可重现的。
2. 如果我像对待普通组件一样对待上面的组件(在 <app-dashboard-tile><app-dashboard-tile/> 中有 app.component.ts)，控制台会显示异常

注意事项:

1. 这个问题是关于 Angular 元素的，而不是关于常规 Angular 项目的。这点很容易被忽视。

2. 如果您可以克隆该项目并在本地运行它，那就太好了。不会超过 2 分钟。

Answer 1

我能够重现您所看到的问题，并且似乎只在使用 createCustomElement() 时抛出错误时才会发生来自“@angular/elements”。

在repo您正在加载 <dashboard-tile>在 index.html 文件中。这是在 <app-root> 之外加载元素因此抑制了 throw new Errors("error") .

我相信 ngOnInit()不是函数属性，因为 DOM 正在加载 <dashboard-tile> Angular 正在注册之前的元素。

如果加载元素<dashboard-tile a="100" b="50" c="25"></dashboard-tile>在 app.component.html 中，您应该会看到错误。

参见 PR 和 Repo:Link

---

如果需要在index.html中调用，推荐如下:

1. 尝试使用 console.error("error")

2. 实现 ErrorHandler (@ Angular/核心)

   • [API 引用][0]
   • Helpful Article亚历克斯苏奥

更新了 dashboard-tile.component.ts:

import {Component, Input, OnInit, ErrorHandler} from '@angular/core';

@Component({
  selector: 'app-dashboard-tile',
  templateUrl: './dashboard-tile.component.html',
  styleUrls: ['./dashboard-tile.component.scss']
})
export class DashboardTileComponent implements OnInit, ErrorHandler {

  @Input() a: number;
  @Input() b: number;
  @Input() c: number;

  constructor() { }

  ngOnInit() {
    debugger;
    this.handleError(new Error('This is Angular Element Error'));
  }

  handleError(err: any): void {
    console.error(err);
  }

}