Использование нескольких угловых элементов в качестве веб-компонентов в угловом проекте - PullRequest
Новая
       61

Использование нескольких угловых элементов в качестве веб-компонентов в угловом проекте

0 голосов
/ 23 октября 2018

Учитывая три проекта @angular, все из которых используют v6.1.9: host, alpha и beta

alpha и beta, создайте и определите веб-компонент каждый с помощью @ angular /элементы как таковые: 

constructor(private injector: Injector) {}

ngDoBootstrap() {
  const config: NgElementConfig = { injector: this.injector };
  const component= createCustomElement(component, config);
  customElements.define("alpha-component", component); // beta-component respectively
}

alpha и beta создаются с использованием ng build --prod --output-hashing none, а затем запускается сценарий посткомпиляции для объединения полученных файлов в порядке: scripts.js, styles.js, runtime.js, main.js.

polyfills.js пропущен, потому что main.ts проверит, определены ли использованные полифиллы уже при загрузке библиотеки (например, чтобы не пытаться переопределить zone.js).

Результирующийпакеты alpha-component.bundle.js и beta-component.bundle.js.

host ссылаются на вышеуказанные пакеты в <head> из index.html с тегами <script defer>.

Если ссылки на пакеты указаны впорядка alpha, затем beta, я увижу alpha, пытающегося дважды загрузиться;В обратном порядке я буду видеть beta, пытающуюся выполнить загрузку дважды.

Поскольку первый ссылочный пакет пытается выполнить загрузку дважды, он пытается определить веб-компонент для пакета дважды, вызывая ошибку, и никогдарегистрация веб-компонента второго ссылочного пакета.

Цель состоит в том, чтобы иметь возможность создавать множество веб-компонентов, используя @angular, а затем использовать их в рамках других технологий @angular или insert framework here.

1 Ответ

0 голосов
/ 23 октября 2018

К сожалению, конкатенация пакетов здесь не работает, б / к веб-пакет использует глобальную переменную.Переменная, созданная альфа-комплектом, будет перезаписана переменной бета-комплекта.

Вы можете переименовать эту переменную в комплектах или использовать [1], и это - переключатель одиночного комплекта.

Чтобы начать, забудьте о том, что говорится в readme о внешнем.Это метод дальнейшей оптимизации, где хост, альфа и бета могут использовать одни и те же библиотеки.Это не позволяет вам загружать Angular несколько раз.

Возможно, вам также интересна моя серия блогов об Angular Elements [2].

С наилучшими пожеланиями, Манфред

[1] https://github.com/manfredsteyer/ngx-build-plus

[2] https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx

...