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

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

用户身份为中的

但我在chrome控制台中没有看到任何错误。 有人能给点建议吗

链接到。 链接到包含代码的github

编辑：

测试：

我已经在chrome和firefox上测试过了。它在两种情况下都是可复制的

如果我像对待普通组件一样对待上述组件（在

app.component.ts

中有

），控制台中将显示异常

注：

这个问题是关于角度元素的，而不是关于规则的角度投影。这很容易被忽视

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

---

我能够重新创建您看到的问题，并且似乎只有在使用“@angular/elements”中的

createCustomElement（）

时抛出错误时才会发生

在中，您正在将

加载到index.html文件中。这是在

如果需要在index.html中调用它，建议使用以下方法：

尝试使用控制台。错误（“错误”）

机具（@角度/核心）

• [空气污染指数参考资料][0]
• 作者：Aleix Suau

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

}

---

在我的例子中，Angular接受了异常，因为我从AppModule构造函数中的“@Angular/elements”调用了

createCustomElement（）

。在我的例子中，将它移动到

ngDoBootstrap（）

方法中就完成了任务

因此，工作的AppModule如下所示：

导出类AppModule实现DoBootstrap{
构造函数（专用注入器：注入器）{}
ngDoBootstrap（）：void{
const webComponent=createCustomElement（OrderFormComponent，{injector:this.injector}）
customElements.define（'my-web-component'，webComponent）
}
}

hi snippet/video/repo都有不同的代码，因此很难判断您在做什么。无论如何，一个只有例外的干净项目可以正常工作。您是否尝试在另一个浏览器中进行验证？也许您可以尝试以下操作：@jcuypers我已链接了我的组件文件。你能看到我的编辑吗。谢谢，这是一只虫子。我为此记录了一个github问题：我可以问一下您是如何尝试重新创建该问题的吗？你克隆了我的项目还是自己创建了一个网络组件？我刚刚在slackbiltz上创建了一个简单的网络组件。我确实查看了回购，你能给我那个stackblitz的链接吗？也请看我的编辑。若我把它当作一个普通的组件来对待，那个么错误就会像预期的那个样显示在控制台中。我想我们都从“2分钟”的角度元素中学到了很多：）祝你们好运

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);
  }

}