Использование приложения Angular6 внутри приложения VueJs
У нас есть приложение Angular (версия 6.1.5), которое делает HTTP-запрос к Restfull API.
Мы использовали модульный подход в приложении Angular. Существуют конфигурации маршрутизации на уровне приложения, и каждый модуль имеет свою собственную конфигурацию маршрутизации.
Эта настройка отлично работает и работает без каких-либо проблем.
Теперь, согласно нашему новому требованию, нам нужно использовать это приложение Angular с приложением VueJS.
После нашего первоначального исследования мы использовали Angular Elements и создали угловую сборку. Мы использовали эту сборку (содержащую файл JS и CSS) с VueJS, мы думали, что она работает нормально, пока мы не нажали обновление в приложении VueJS.
Как только мы нажимаем «Обновить», маршруты приложений Angular не работают, и мы видим только пустой экран.
Итак, что мы хотели бы знать, так это то, является ли наш подход к использованию углового элемента правильным. Или есть лучшие подходы к использованию углового приложения в приложении VueJS.
Спасибо за вашу помощь.
Вопрос слишком неконкретный, чтобы на него можно было ответить. Это не будет отличаться для приложения Vue внутри Angular, Angular внутри React и т. д. Не существует общих «лучших практик», запрос на них не относится к теме SO. Если используются элементы Angular, разумно делегировать маршрутизацию хосту, т.е. Vue. Пожалуйста, предоставьте stackoverflow.com/help/mcve для вашей проблемы.
Я не думаю, что фреймворк внутри фреймворка — хорошая идея.
@Swoox См. принятый ответ
@Jalil см. принятый ответ
Ответы 1
Предположительно, ни один из комментаторов исходного вопроса не знаком с Веб-компоненты (который использует Angular Element). Использование нескольких фреймворков в сочетании с изолированными веб-компонентами — это совершенно нормальная и общепринятая практика. На самом деле, он, вероятно, станет более популярным.
Так или иначе, проблема здесь заключается в принципиальной несовместимости библиотек маршрутизации. Поскольку маршрутизация сильно привязана к адресной строке и HTML 5 History API, дочерние компоненты (независимо от фреймворка или веб-компонентов) не могут просто работать так, как вы ожидаете. Во-первых, Vue Router находится в «родительском» компоненте, в то время как Angular (через веб-компоненты) пытаются настроить маршрутизацию, что затем терпит неудачу.
Вам придется реорганизовать компоненты Angular, чтобы не использовать маршрутизацию.
Это не проблема Vue, Angular и веб-компонента, а проблема маршрутизации.
Ваш ответ теперь имеет для меня смысл. Вместо использования маршрута для отображения компонентов я теперь использую свойство для отображения компонентов. И это рефакторинговое приложение Angular отлично работает в приложении VueJS. Спасибо
Трудно сказать, потому что vue и angular — это совершенно два разных фреймворка. В большинстве случаев вы выбираете одно или другое, а не оба. Мне нужно использовать vuejs в качестве стартового и Angular для большого проекта.