Angular 9 элементов: как создать автономный веб-компонент (со всеми зависимостями)? - PullRequest
Новая
       17

Angular 9 элементов: как создать автономный веб-компонент (со всеми зависимостями)?

1 голос
/ 10 марта 2020

Я пытаюсь разработать новое приложение на основе Micro Frontends с Angular 9 и WebComponents . Основная цель, которую я хочу достичь с помощью WebComponents, заключается в том, чтобы различные группы работали независимо друг от друга, развертывая свои обновления в любое время и имея основной упаковщик, просто загружая соответствующий автономный пакет и вставляя его в страницу упаковки.

На данный момент мне не нужно обрабатывать разные фреймворки, но мне просто нужно иметь очень низкую связь между каждой из них, обе на зависимостях (каждый WebComponent должен приносить свои собственные зависимости, с разрешенное исключение Polyfills и Runtime на данный момент) и для развертываний (просто разверните / выставьте пакет WebComponent и вставьте его в оболочку через GET API). Архитектура, которую я имею в виду, выглядит следующим образом:

  1. UI : это оболочка для всех остальных веб-компонентов
  2. DashboardOne-UI : панель управления, зарегистрированная как веб-компонент
  3. DashboardTwo-UI : панель управления, зарегистрированная как веб-компонент

Примеры веб-компонентов, которые я обнаружил в Интернете все очень простые; Я имею в виду, что они просто используют стандартные html элементы (кнопки, абзацы, ...), следовательно, нет никакой зависимости для включения в выходной комплект. В моем случае DashboardOne-UI использует Prime-NG и Prime-Icons , и я бы не стал устанавливать такие зависимости на UI .

Для создания DashboardOne-UI и обслуживания выходных файлов я использую NGX-Build-Plus и HTTP-сервер , выполнив следующие команды: 

"scripts": {
    "start": "http-server dist/DashboardOne-UI/ --port 8084",
    "build": "ng build --prod --single-bundle"
}

После сборки папка dist содержит:

enter image description here enter image description here

и это содержимое из index. html: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OrganizationUI</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <organization-dashboard></organization-dashboard>
    <script src="polyfills.js" defer></script>
    <script src="scripts.js" defer></script>
    <script src="polyfill-webcomp-es5.js" defer></script>
    <script src="polyfill-webcomp.js" defer></script>
    <script src="main.js" defer></script>
  </body>
</html>

Запустив скрипт запуска, я могу заставить WebComponent работать в браузере так, как ожидается, но когда я внедряю только сценарий main. js в приложении UI не может получить все шрифты и стили:

enter image description here

Единственный способ избежать таких зависимостей от переноса UI - заставить DashboardOne WebComponent 'css указывать на стили в NPM* 10 73 * вместо локальных node_modules , используя: 

@import url("https://unpkg.com/primeicons@2.0.0/primeicons.css");
@import url("https://unpkg.com/primeng@9.0.0/resources/primeng.min.css");
@import url("https://unpkg.com/primeng@9.0.0/resources/themes/nova-light/theme.css");
@import url("https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css");

вместо: 

@import url("~primeicons/primeicons.css");
@import url("~primeng/resources/primeng.min.css");
@import url("~primeng/resources/themes/nova-light/theme.css");
@import url("~bootstrap/dist/css/bootstrap.min.css");

Проблема с этим подходом заключается в том, что мне нужно обрабатывать зависимости в двух местах css и пакет. json. Есть ли лучший способ для создания автономных WebComponents в Angular 9, так что мне просто нужно импортировать один JS файл в приложение-оболочку, без учета зависимостей WebComponents?

1 Ответ

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

Я только что обнаружил, что возможный подход к лучшему решению - предоставить 

ng build

путь для URL развертывания (дополнительная информация здесь ): 

"scripts": {
  "start": "http-server dist/DashboardOne-UI/ --port 8084",
  "build": "ng build --single-bundle --deploy-url http://localhost:8084/"
}

Таким образом, элемент веб-компонента DashboardOne-UI после внедрения в оболочку UI будет указывать на свой собственный сервер, на котором все необходимые ресурсы могут быть найденным.

...