4

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

仪表盘-tile.component.ts用户，<dashboard-tile a="100" b="50" c="25"></dashboard-tile>如index.html

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

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

链接到视频。链接到 github repo包含代码。

编辑：

测试：

  1. 我已经在 chrome 和 firefox 中对其进行了测试。它在两者中都可重现。
  2. 如果我将上述组件视为普通组件（具有<app-dashboard-tile><app-dashboard-tile/>in app.component.ts），则异常会显示在控制台中

一张纸条：

  1. 这个问题是关于角度元素而不是关于常规角度项目。很容易忽略这一点。

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

4

2 回答 2

10

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

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

我相信ngOnInit()is not function 属性，因为 DOM<dashboard-tile>在 Angular 注册之前加载元素。

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

请参阅 PR 和回购：链接

如果需要在index.html中调用它会推荐如下：

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

  2. 实现ErrorHandler (@angular/core)

更新了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);
  }

}
于 2019-03-10T21:24:50.263 回答
1

在我的例子中，Angular 吞下了异常，因为我createCustomElement()在 AppModule 的构造函数中调用了 from '@angular/elements'。在我的情况下，将其移入ngDoBootstrap()方法中就可以完成这项工作。

所以工作的 AppModule 看起来像：

export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}

  ngDoBootstrap(): void {
    const webComponent = createCustomElement(OrderFormComponent, { injector: this.injector })
    customElements.define('my-web-component', webComponent)
  }
}

于 2020-10-07T09:42:52.613 回答