Запуск нескольких приложений Angular на одной странице

Question

Предполагается, что на странице уже есть угловой прогон.Я хотел бы добавить / добавить изолированное угловое приложение (которое работает изолированно с существующим угловым приложением без помех).

Например, я хотел бы 1) вставить пользовательский элемент, скажем <app-root-two></app-root-two> на странице, затем 2) инициализировать / загрузить это приложение (или наоборот).

Как мне добиться этого?

Я знаю, что в AngularJs это возможно, потому что вы можете извлечь элемент DOM и использовать angular.boostrap(<dom-element>) для его инициализации, но я не думаю, что Angularимеет тот же шаблон ручной загрузки.Он абстрагируется и направляется непосредственно в DOM для поиска корневого элемента, обычно <app-root> на странице.

Текущей угловой версией, с которой я работаю, является версия 5.2 и Angular CLI 1.6.6.Я пробовал файл .angular-cli.json для создания нескольких приложений, однако он нацелен на два отдельных файла «index.html», то есть два приложения в одном проекте, не обязательно на одной странице.

Answer 1

При просмотре исходного кода мне пришлось немного переопределить.AngularJs делает две вещи автоматически: 1) загружает любое «ng-приложение» 2) добавляет тег.Чтобы предотвратить любой конфликт.Я прокомментировал оба бита.Вместо этого я взял содержимое тега и поместил его в свой файл scss и вручную загрузил свой пользовательский элемент

Другая вещь - Angularjs загружается в контексте скрипта содержимого расширения Chrome, поэтому любое окно глобально определяется непосредственно в содержимомСкрипт не будет кровоточить на странице пользователя.

Кроме того, я использовал shadow dom для дальнейшей изоляции приложения, чтобы никакие css / js-объекты не входили и не выходили.Пока я не изменяю какие-либо общие аспекты страницы, у меня все будет хорошо, например, местоположение.Любые глобальные события привязки мне нужно добавить / удалить в зависимости от жизненного цикла.Конечный результат будет выглядеть примерно так:

<custom-element>
   #shadow-dom
      <!-- stylesheet if any -->
      <!-- js script if any -->
      <bootstrapped-angular-element>

Answer 2

Вам нужен другой корневой элемент во втором AppModule.Затем просто импортируйте ваши вторые скрипты приложения (время выполнения, стили и т. Д.), Но delete window.webpackJsonp first.

Например,

<app-one></app-one>
<app-two></app-two>

<script type="text/javascript" src="app-one/runtime.js"></script>
<script type="text/javascript" src="app-one/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-one/polyfills.js"></script>
<script type="text/javascript" src="app-one/styles.js"></script>
<script type="text/javascript" src="app-one/vendor.js"></script>
<script type="text/javascript" src="app-one/main.js"></script>

<script>delete window.webpackJsonp</script>

<script type="text/javascript" src="app-two/runtime.js"></script>
<script type="text/javascript" src="app-two/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-two/polyfills.js"></script>
<script type="text/javascript" src="app-two/styles.js"></script>
<script type="text/javascript" src="app-two/vendor.js"></script>
<script type="text/javascript" src="app-two/main.js"></script>

Хотя на сегодняшний день это работает, фреймворк явно непредназначен для этого.У более сложных приложений с дальнейшим разбиением на блоки могут быть проблемы с временем выполнения приложения, которые вы существенно меняете при удалении объекта webackJsonp.

Полифилы, которые обращаются к глобальным прототипам, могут пропустить повторный импорт.

Answer 3

Взгляните на общее-структурное руководство

Вы можете просто загрузить одно приложение, но организовать (ленивая загрузка) множество различных модулей, которые будут вести себя как приложения.Каждый подосновный модуль будет иметь все необходимые ему модули, службы, компоненты и т. Д., И он будет изолирован.