Несколько пользовательских элементов, разработанных в угловых элементах на одной странице

Question

Я разработал 2 пользовательских элемента в разных проектах элементов Angular и при попытке использовать их в одном HTML-файле я получаю сообщение об ошибке «Не удалось выполнить определение» в «CustomElementRegistry»: это имя уже использовалось в этом реестре » Как перейти по этой ссылке для разработки https://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a

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

Спасибо

Answer 1

Проблема: Элементы упаковывают весь Angular и выводят его в виде единого файла JS. Когда два из них запускаются на одной странице, возникают некоторые ужасные и странные конфликты, которые могут влиять или не влиять на поведение ваших элементов (более чем вероятно, так и будет).

Решение: Единственный способ, которым я смог заставить два угловых элемента работать безупречно на одной странице, это объединить их в одно приложение. Они по-прежнему являются отдельными элементами, то есть вы можете включать эти пользовательские теги в любое место на странице независимо от других.

Вы по-прежнему можете выполнить шаги для создания пользовательского элемента, но в вашем файле app.module.ts просто добавьте любые другие элементы, которые вы хотите определить:

  ngDoBootstrap() {
    const ele1= createCustomElement(ComponentOne, { injector: this.injector });
    customElements.define('my-ele-one', ele1);

    const ele2= createCustomElement(ComponentTwo, { injector: this.injector });
    customElements.define('my-ele-two', ele2);

    const ele3= createCustomElement(ComponentThree, { injector: this.injector });
    customElements.define('my-ele-three', ele3);

    ....
  }

и ваш HTML может выглядеть примерно так:

<h1> My Elements </h1>

<my-ele-one></my-ele-one>

<p>What a cool element!</p>

<my-ele-two></my-ele-two>

<div class='turtle'>
 <p><my-ele-three></my-ele-three></p>
</div>

Это может даже сократить общую загрузку страницы, поскольку теперь у вас не будет двух загруженных приложений.

Вероятно, я потратил более 50 часов, пытаясь настроить два отдельных приложения Angular Elements для совместной работы, но безрезультатно. Мне нужно было поддерживать все браузеры, что, безусловно, было огромным фактором, так как я мог заставить определенные конфигурации работать в Chrome или IE, но не в обоих. Мои элементы тоже не были простыми, у них было много рабочих частей (модальные бутстрапы, ag-сетки и т. Д.). Надеюсь, что это поможет кому-то в будущем.