Использование приложения Angular6 внутри приложения VueJs

Question

У нас есть приложение Angular (версия 6.1.5), которое делает HTTP-запрос к API Restfull.

Мы использовали модульный подход в Angular App.Существуют конфигурации маршрутизации на уровне приложения, и каждый модуль имеет свою собственную конфигурацию маршрутизации.

Эта настройка идеально подходит и работает без каких-либо проблем.

Теперь, согласно нашему новому требованию, нам нужно использовать это приложение Angular вместе с приложением VueJS.

После нашего первоначального исследования мы использовали Angular Elements и создали угловую сборку.Мы использовали эту сборку (содержащую файлы JS и CSS) вместе с VueJS, мы думали, что она работает нормально, пока мы не нажмем на обновление приложения VueJS.

Как только мы нажмем на обновление, маршруты приложения Angular не работают, и мы толькосм. пустой экран.

Итак, мы хотели бы знать, является ли наш подход использования углового элемента правильным.Или есть более эффективные подходы к использованию углового приложения в приложении VueJS.

Спасибо за помощь.

Answer 1

Предположительно, никто из комментаторов исходного вопроса не знаком с Веб-компонентами (из которых используется Angular Element).Использование нескольких фреймворков в сочетании с изолированными веб-компонентами - это совершенно нормальная и принятая практика .Фактически, он, вероятно, станет более популярным.

В любом случае, настоящая проблема здесь заключается в фундаментальной несовместимости библиотек маршрутизации.Поскольку маршрутизация настолько привязана к адресной строке и API истории HTML 5, дочерние компоненты ( независимо от какой-либо платформы или веб-компонентов ) не могут просто работать так, как вы ожидаете.Во-первых, Vue Router находится в «родительском» компоненте, в то время как Angular (через веб-компоненты) пытается настроить маршрутизацию, которая затем завершается неудачей.

Вам придется реорганизовать компоненты Angular, чтобы они не использовали маршрутизацию.

Это не проблема Vue vs Angular vs Web Component, а проблема маршрутизации.