Angular -> generating Web Components

[playerx]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

none

Expected behavior

Create web components using angular

What is the motivation / use case for changing the behavior?

I think it would be cool if angular will give us ability to generate web components, I was researching and found angular elements project but it's archived: https://github.com/robwormald/angular-elements.

Main goal is to generated web components, that will wrap angular component and will be hosted & accessible independently.

What's your plan about that?

[Toxicable]

Angular Elements is our plan, it's currently in progress
https://github.com/angular/angular/tree/labs/elements

[playerx]

Thats just awesome, I've found the video also:
https://www.youtube.com/watch?v=ljsOPm4MMEo

Do you have some sample project (source code) how to use it? I would love to try it.

[gkalpak]

Nothing official atm I'm afraid. There are still some things to work out (e.g. packaging). And docs are also coming.
(You can get an idea of how to use it from this stackblitz project, where I have put the code from the labs/elements branch into the @angular/elements directory).

The tl;dr instructions to use it are:

import {NgModule} from '@angular/core';

// Create some component as usual. (Note: `ContentChild[ren]` are not supported.)
import {MyFunkyComponent} from './my-funky.component';

// Define a list of components that you want to use as Custom Elements. (We'll use this later.)
export const ceComponents = [MyFunkyComponent];

// Create a module (almost) as usual.
@NgModule({
  ...
  providers: [...],
  declarations: [
    ...,  // Other non-CE components can go here
    ...ceComponents,
  ],

  // Differences from what you usually do:
  // - No `bootstrap` components.
  // - Define as `entryComponents` all components that you want to use as Custom Elements.
  entryComponents: ceComponents,  
})
export class MyFunkyModule {}

// Then somewhere in your non-Angular app:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {registerAsCustomElements} from '@angular/elements';
import {ceComponents, MyFunkyModule} from './my-funky.module';

const bootstrapFn = () => platformBrowserDynamic().bootstrapModule(MyFunkyModule);
registerAsCustomElements(ceComponents, bootstrapFn).
  then(moduleRef => /* Custom Elements are ready. Do your thing... */);

Note, that depending on the browser you will need a different set of polyfills for Custom Elements.
Chrome (/Opera) have the best support atm, and for them you need @webcomponents/custom-elements/src/native-shim if you want to be able to transpile ES2015 classes to ES5 functons (because this is not compatible with Custom Elements according to the spec).
_{(If you re willing to use ES2015 sources and configure your build process to do so, then you don't need an extra polyfill on Chrome/Opera.)}

[gkalpak]

If you are interested in using ES2015 sources, there is some info in this discussion (including some working projects you can checkout).

[playerx]

Thanks a lot!

[gkalpak]

I am going to close this issue now, since it is not actionable in its current state. Feel free to fiddle around with labs/elements and make sure you send any feedback or issues our way ❤️

[playerx]

I've created demo project using latest angular cli:
https://github.com/playerx/angular-elements-sample

I think more people will be interested in this topic and hope it will be useful for them.

P.S. It's really simple :)

[playerx]

I've created little bit more complex scenarios and results are really impressive:

creating web components (source code)
using web components (source code)

@gkalpak
I've found one issue, if I'm hosting angular element in another angular element, in the same project, it's rendered two times:


but when I'm using those components in another project it renders correctly once.
I think angular renders it as angular component and after that it's rendered as web component also.

[gkalpak]

Thx for the feedback, @playerx! That really helps us 👍
The double-compilation is a known issue. We are still investigating the best solution (one that does not impose any extra overhead on pure-Angular apps and has minimal overhead for ngElements apps.

[studioTeaTwo]

I feel @angular/elements is so cool!

I want to create a custom tag which is extends HTMLElement and publish to use in <script src="fancy-button.js"></script>.

Just like Rob's demo

How do I develop it by @angular/elements?

[gkalpak]

As mentioned above, there are still some rough edges and packaging is an open issue. In a nutshell, you would need to bundle your Angular app (including Angular itself and any 3rd-party libs) and run registerAsCustomElements(...) in your main.ts file. See @playerx's demo for an example.

[studioTeaTwo]

@gkalpak Thank you for quick reply ! And I see.

I have one more question.

registerAsCustomElements(...) has two functions.

export function registerAsCustomElements<T>(
    customElementComponents: Type<any>[], platformRef: PlatformRef,
    moduleFactory: NgModuleFactory<T>): Promise<NgModuleRef<T>>;
export function registerAsCustomElements<T>(
    customElementComponents: Type<any>[],
    bootstrapFn: () => Promise<NgModuleRef<T>>): Promise<NgModuleRef<T>>;

How should we use each two funcitons differently?