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

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

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

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

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

Ссылка на видео. Ссылка на репозиторий на github, содержащий код.

Изменить:

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

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

Записка:

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

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


angular angular-elements
person dasfdsa    schedule 10.03.2019    source источник
comment
Привет, фрагмент / видео / репо имеют разный код, поэтому трудно сказать, над чем вы работаете. в любом случае чистый проект, за исключением случаев, работает нормально. вы пробовали в другом браузере просто для проверки?   -  person jcuypers    schedule 11.03.2019
comment
возможно, вы можете попробовать это: заголовок stackoverflow.com/questions/18655354/   -  person jcuypers    schedule 11.03.2019
comment
@jcuypers Я связал файл своего компонента. Можете ли вы увидеть мою правку. Спасибо.   -  person dasfdsa    schedule 11.03.2019
comment
Это ошибка. Для этого я зарегистрировал проблему github: github.com/angular/angular/issues/29211   -  person dasfdsa    schedule 23.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

В моем случае Angular проглатывал исключения, потому что я вызывал createCustomElement() из '@angular/elements' в конструкторе AppModule. Перемещение его в метод 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)
  }
}

person Federico Bellini    schedule 07.10.2020

arrow_upward

arrow_downward

person    schedule
comment
Могу я спросить, как вы пытались воссоздать проблему? Вы клонировали мой проект или сами создали веб-компонент? - person dasfdsa; 11.03.2019
comment
Я только что создал простой веб-компонент на slackbiltz. Я проверил репо, хотя - person codedawi; 11.03.2019
comment
Вы можете дать мне ссылку на этот stackblitz? - person dasfdsa; 11.03.2019
comment
Также, пожалуйста, посмотрите мое редактирование. Если я отношусь к нему как к обычному компоненту, ошибки отображаются в консоли, как и ожидалось. - person dasfdsa; 11.03.2019
comment
Ваш проект представляет собой обычный угловой проект, а не угловой элемент. Вы можете уточнить? - person dasfdsa; 11.03.2019
comment
О, мои извинения, моя оплошность. Это просто обычный угловой проект. Я собираюсь попробовать использовать ваше репо. - person codedawi; 11.03.2019
comment
Ха-ха. Я задал пару других вопросов об угловых элементах на SO. Почти 100% людей отвечают на него, думая об этом как об обычном угловом проекте. Не проблема :) . Я обязательно добавлю примечание внизу. - person dasfdsa; 11.03.2019
comment
Выглядит нормально так. - person jcuypers; 11.03.2019
comment
@jcuypers спасибо, что указали мне правильное направление с помощью showAsComponent(). Я вернулся и обновил свой комментарий. Похоже, элемент не загружался Angular и не упоминался в index.html. - person codedawi; 11.03.2019
comment
Спасибо. Загрузка его в app.component работала. Я посмотрю на это завтра. - person dasfdsa; 11.03.2019
comment
Я думаю, мы все многому научились за 2 минуты угловых элементов:) удачи - person jcuypers; 11.03.2019