Angular 2 - will directives be exportable as pure Web Components?

[Matt Steele]

Angular 2 components will be implemented using Web Components technologies (shadow DOM, etc). Does that mean they will be usable in a non-Angular application, assuming the browser supports Web Components?

I can't find much documentation on the subject, other than a post Misko made almost two years ago:

"Components written in Angular will export to Web Components (to be used by Polymer, Ember, or any other framework/library) ."

Is this still planned? I maintain an enterprise component library built with Angular directives, and would love to make them usable in any framework.

[Sander Elias]

Hi Matt,

So I did read that somewhere! :) 

DISCLAIMER: NG2 is a moving target, so I might be way off here. Please correct me if I'm wrong!

I think this has changed. Probably because the web-components are very far from being readily available(The native parts that are needed, not polymer!)

Using web-components is no problem with ng2. Also using ng2 inside a web-components should be possible (altough a quite heavy requirement!)

Regards

Sander

[Brad Green]

So, for an official word, no, Angular components do not currently export as Web Components.   Like Sander says, you can use Web Components in an Angular app.

While it's possible to provide this, we're not sure of the use cases where this is interesting so we haven't focused on it.  Let us know if you've found a big need.

[Matt Steele]

Thanks Brad. I'll try and explain my use case:

I work for a large organization and maintain a set of reusable components that app teams can use to provide branding, consistent UI, etc. Very similar to what OpenTable demoed at ng-conf.

The library has evolved over the years. Initially it was built as a set of widgets, similar to jQuery-UI's methodology. In the last couple years we redesigned the component library to be native Angular 1.x directives: <app-groupbox>, etc.

This works great for those applications that are built using Angular, but not all teams have adopted (or will adopt) the framework. Many are built using server-side rendering (Struts, JSPs, etc), and others have been built using a different technology (Backbone, React, etc). Our current solution requires teams to bootstrap an empty Angular application to use the components. This seems unnecessary, causes a performance hit, and creates multiple, sometimes incompatible, runtimes.

It'd be great if we could build our directives as Angular directives, and then export them to "pure" Web Components, so others could use them directly, with whatever tools they desired.

If this isn't possible, our alternative is to build the next version of our component library using X-Tag or Bosonic. We like building components in Angular, so this would be a regression in our view.