Створення розширюваного динамічного підключається корпоративного додатка з Angular Олексій Зуєв Angular

У цій статті ми поговоримо про те, як ми можемо використовувати інструменти побудови Angular CLI для створення попередньо скомпільованого модуля Angular, який може спільно використовувати спільний код з іншими плагінами і навіть працювати з Angular universal. Це неофіційне рішення, але воно добре працює для нашого випадку.

динамічного

AngularInDepth віддаляється від Середнього. Останні статті розміщені на новій платформі inDepth.dev . Дякуємо за участь у поглибленому русі!

Ось просте зображення того, що ми будуємо:

Тут ми маємо просту сторінку, де ми отримуємо конфігурацію плагінів із файлу plugins-config.json. Тоді ми спочатку ліниво завантажуємо скомпільований плагін AOT (plugin1.js), який має залежність від shared.js. Спільна бібліотека містить компонент Tabs та Tabs ng factory. Через деякий час ми завантажуємо другий плагін (plugin2.js), який повторно використовує код із раніше завантаженої бібліотеки shared.js.

Ось сховище архітектури angular-plugin Github, якщо ви хочете поглянути на вихідний код.

В демонстрації ми використовуємо Angular CLI 7.3.6

Давайте не чекатимемо Айві, а натомість матимемо справу з поточним ViewEngine сьогодні

  • Чому саме кутовий?
  • Мета
  • Що таке плагін?
  • Чому так складно створити плагін за допомогою Angular?
  • Вимоги
  • Інші рішення
  • На шляху до рішення
  • Одинарна пачка
  • Зовнішні
  • Динамічний експорт
  • Створення плагіна
  • Зовнішні та спільні кутові бібліотеки
  • Завантажити плагін (клієнт, сервер)
  • Як відобразити плагін?
  • Як ізолювати основну програму від помилок у плагіні?

Команда Angular та громада продовжують стрімке зростання своєї екосистеми.

Angular допомагає нам послідовно структурувати наш код, щоб кожен новий розробник міг легко брати участь у проекті.

Нам подобається той факт, що ми дотримуємося найкращих веб-практик з Angular, просто подумайте про машинопис, спостережувані дані, візуалізацію на стороні сервера, веб-працівників, диференціальне завантаження, прогресивне веб-додаток (PWA), ледаче завантаження тощо. швидко застосувати ці функції.

Також є більше функцій, які пропонує нам Angular, такі як вбудована система впорскування залежностей, реактивні форми, схеми тощо.

Ось чому ми зазвичай обираємо Angular при побудові корпоративного додатка.

Одного разу наш клієнт попросив нас додати нову функцію до його існуючої програми Angular Universal. Він хотів мати роз’ємну систему управління вмістом (CMS). Метою було додати можливість розширити функціональність поточної програми, щоб сторонній розробник міг легко самостійно розробити новий модуль та завантажити його. Потім додаток Angular повинен забрати його без необхідності перекомпілювати цілу програму та передислокувати.

Простіше кажучи, нам потрібно розробити систему плагінів.

Системи плагінів дозволяють розширити програму без зміни основного коду програми.

Це звучить просто, але писати плагін за допомогою Angular - це завжди проблема.