CODEWITHSUNDEEP
angularweb-component
Lukas
Lukas

Reputation: 10350

Is it possible to wrap an Angular 4 app in a web component?

We have to work with a CMS that can only be extended with web components, but as we have complex modules we would like to write our modules in Angular 4 (also, for other reasons, we are forced to use Angular instead of, lets say, React).

Is it possible to write an Angular 4 app and wrap it in a web component?

Upvotes: 5

Views: 1606

Answers (1)

Brecht Billiet
Brecht Billiet

Reputation: 229

You could, but I wouldn't consider it the best idea. There are a few things you have to take under consideration.

  • The angular4 has to share the router with the application that contains the web-component. There is only one window.location object. (unless you wrap it in an iframe) This basically means that you can't do navigation in that angular 4 application.
  • Zone.js can only be loaded one time (so when you include multiple angular 4 apps you will have to make sure that it's only loaded once)
  • The web component can only be used once, since an angular application will be rendered on a specific component (in other words, it can only have one instance)
  • Angular 4 however is working on something together with web components https://github.com/robwormald/angular-elements

My two cents: When you want to run multiple physical angular applications in one application use iframes and communicate through document events. Obviously that has some performance tradeoffs if you don't manage them correctly. I've created a presentation that might answer a few more of your questions: https://www.slideshare.net/BrechtBilliet/agular-in-a-microservices-world

Upvotes: 7

Related Questions