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.

Answer 1

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.