Почему угловые элементы глотают ошибку? - PullRequest
Новая
       7

Почему угловые элементы глотают ошибку?

0 голосов
/ 10 марта 2019

У меня есть самый простой из возможных угловой элемент в рамках углового проекта.Я выкидываю ошибку в компоненте, принадлежащем угловому элементу, следующим образом:

dashboard-tile.component.ts пользователь как <dashboard-tile a="100" b="50" c="25"></dashboard-tile> в index.html 

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

Но я не вижу ошибки в консоли Chrome.Может кто-нибудь, пожалуйста, совет?

Ссылка на видео .Ссылка на github репо с кодом.

Редактировать:

Тестирование:

  1. Я проверил это в Chrome и Firefox.Его можно воспроизвести в обоих случаях.
  2. Если я рассматриваю вышеуказанный компонент как обычный компонент (имеющий <app-dashboard-tile><app-dashboard-tile/> в app.component.ts), исключения отображаются в консоли

Примечание:

  1. Этот вопрос касается угловых элементов , а не о обычном угловом проекте.Это легко пропустить.

  2. Было бы здорово, если бы вы могли клонировать проект и запустить его локально.Это не займет больше 2 минут.

1 Ответ

2 голосов
/ 11 марта 2019

Мне удалось воссоздать проблему, с которой вы столкнулись, и, похоже, она возникает только при выдаче ошибки при использовании createCustomElement() из '@ angular / elements'.

В репо вы загружаете <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: Ссылка

Если вам нужно вызвать его в 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);
  }

}
...