Angular Elements support

[esistgut]

Angular Elements is in the process of being merged in the Angular master branch.
Will angular-cli provide some kind of support to this feature?

[rodrigoEclipsa]

Is it currently possible to use angular elements v6 with angular cli?

[DaSchTour]

I've seen ng add @angular/elements somewhere which also should add needed polyfills. It seams that there already is some kind of "support" for this feature.
From my point of view the post important thing that should be supported, is some kind of "registration" of elements in angular-cli.json so they will be build and exported on ng build.
I don't really know what kind of additional support is needed for angular elements.

[DaSchTour]

By looking into the not very well documented eco system around angular cli I guess what is missing is a @angular-devkit/build-angular:webcomponent that allows specifying a main that points to a module that contains the webcomponents that should be exported. Additionaly there should be a alternative polyfill file that contains webcomponent polyfills. Something like this:

"build": {
          "builder": "@angular-devkit/build-angular:webcomponent",
          "options": {
            "outputPath": "dist/webcomponents",
            "main": "src/app/webcomponent.module.ts",
            "polyfills": "src/webcomponent.polyfills.ts",
          }
}

The webcomponent.module.ts would look like this

import { Injector, NgModule } from '@angular/core';
import { ButtonComponent } from './button.component';
import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [ButtonComponent],
  exports: [ButtonComponent],
  entryComponents: [ButtonComponent]
})
export class ButtonModule {
  constructor(private injector: Injector) {
    const customButton = createCustomElement(ButtonComponent, { injector });
    customElements.define('custom-button', customButton);
  }
}

Hopefully @angular/core is not that big that it carries to much unneeded code into the bundle.

Is this the way to go? Is there anything on the roadmap to support this? I really would like to get small reusable webcomponent bundles from my project. It would be really awesome if there was any documentation on how to get this done.

[alan-agius4]

Let's close this in favor of #19164 since there is more discussion happening over there.

Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}