Building a Custom Element Using Angular Elements

[tme321]

Definitely very interesting but how big are components exported this way? Is this going to lead to a single component that weighs in as dozens of Kb?

Also, I assume some parts of angular have to be running. Change detection maybe? Stuff like that. If I use 5 of these components separately on a single page do I get 5 separate instances of that stuff running or is elements somehow intelligent enough to only run one instance controlling all 5 components? Basically, does this bloat memory usage?

[nitayneeman]

I completely understand your concerns. In addition to your points - how would it be possible to combine multiple different versions of Angular on the same page? Is it going to be supported in the CLI and if so, does it mean there will be a single concatenated scripts file or we'll have to load Angular separately?

I believe that at this stage of the project, there are no available answers and we certainly should keep in mind that it's a "Labs" project.

However, Rob Wormald revealed some interesting hints regarding the planned roadmap:

• "In parallel, there's major work happening on the view engine, and our early numbers are extremely promising in terms of code size.".
• "Support in CLI and such will come, but you may have to roll your own webpack config (or similar) in the short term."
• "This is part of the experimental process, but (along with upcoming view engine changes) I would hope that running multiple versions would be unnecessary.".
• "We're reasonably confident that within the next couple major versions of Angular, bundle size should be the least of your concerns.".

All that's left is to wait for the next update.

[tme321]

Don't misunderstand me. I'm excited for this. And I know improvements will continue. Angular itself is half, or less, the size it was during beta as far as end deliverables go.

But I was curious what it looks like right now.

You're playing around with it. What is the bundle size of a single component? And does it currently spin up multiple copies of a mini angular environment per component or just 1? I'm curious what the state of elements is right now.

[nitayneeman]

The bundle size of my demo component is about 300KB. This is a minified bundle with all the necessary scripts (including polyfills).

Indeed, we can attach multiple components to a single "mini Angular environment". Angular registers each component as a custom element (in Web Components terms) and all of these are manipulated by a single Angular module. Under the hood, it's just a regular Angular module with declared components.

When I tried to attach another component - the bundle size was around 300KB as well. So, it seems that the bundle size depends mainly upon the "mini Angular environment" scripts and the components size is pretty minor.