Using Angular6 application inside VueJs application

Question

We have Angular application (version 6.1.5), which makes HTTP request to the Restfull API.

We have used modular approach in Angular App. There is app level routing configurations and each modules have their own routing configuration.

This set up is perfectly fine and running without any hassles.

Now as per our new requirement, we need to use this Angular application withing VueJS application.

After our initial research, we used Angular Elements and created angular build. We used this build (containing JS and CSS file) withing the VueJS, we thought it worked fine, until we hit refresh on VueJS application.

Once we hit refresh, the Angular application routes are not working and we only see blank screen.

So what we would like to know is, whether our approach of using angular element is right one. Or are there any better approaches to use angular application within VueJS application.

Thanks for your help.

It's hard to say cause vue and angular are tottally two different frameworks. Most of the time you choose the on or the other not both. I requiment using vuejs as a starter and Angular for a large project. — Swoox
– Swoox, Commented Jun 14, 2019 at 8:51
The question is too unspecific to be answered. This wouldn't be different for Vue app inside Angular, Angular inside React, etc. There are no general 'best practices', asking for them is off-topic on SO. If Angular elements are used, it's reasonable to delegate routing to a host, i.e. Vue. Please, provide stackoverflow.com/help/mcve for your problem. — Estus Flask
– Estus Flask, Commented Jun 14, 2019 at 9:08
I don't think having a framework inside a framework is a good idea — Jalil
– Jalil, Commented Jun 14, 2019 at 9:48

user9993 · Accepted Answer · 2019-06-14 10:47:44Z

4

Presumably none of the commenters on the original question are familiar with Web Components (of which Angular Element uses). Using multiple frameworks in combination with isolated web components is a perfectly normal and accepted practice. In fact, it is likely to become more popular.

Anyway, the actual problem here is a fundamental incompatibility of routing libraries. Because routing is so tied to the address bar and the HTML 5 History API, child components (regardless of any framework or web components) can't simply work how you are expecting it to work. Firstly, Vue Router is in the "parent" component while the Angular ones (via Web Components) try setup routing which then fails.

You will have to refactor your Angular components to not use routing.

This isn't a Vue vs Angular vs Web Component problem but a routing problem.

answered Jun 14, 2019 at 10:47

user9993

6,23912 gold badges62 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sameer K Over a year ago

Your answer makes perfect sense to me now. Instead of using route to display the components, I am now making use of property to show components. And this refactored Angular app is perfectly working fine in VueJS app. Thank you

Collectives™ on Stack Overflow

Using Angular6 application inside VueJs application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related