@ngce/schematics v1.1.0

Angular Schematics - Custom Elements

This is a Schematic implementation used to create Angular applications that support custom elements.

Setup

The Schematic implementation is a Node.js package that can be installed by running run the following:

npm install @ngce/schematics

At the core, the library will create standard Angular applications and, as such, will allow you to specify the same flags when running ng new application using the @schematics/angular implementation. The @ngce/schematics implementation, however, provides an additional --applicationType option to allow a developer to create either a custom element workspace or a custom element consuming application.

Create a Custom Element

To create a new Angular workspace implementing a custom element called custom-element, run the following command:

ng new --collection=@ngce/schematics --applicationType=customElement custom-element

All custom elements must follow the format of:

/^([A-Za-z0-9]*)([\-A-Za-z0-9])*$/g

Custom element workspaces that do not follow this pattern will require additional configuration.

To publish the custom element, run the following:

npm run build
npm publish

Alternatively, you can run the following command, which will create a custom-element-0.0.0.tgz file:

npm run build
npm pack

Consume Custom Elements

To create a new Angular application equipped to consume and use custom elements called custom-elements-app, run the following command:

ng new --collection=@ngce/schematics --applicationType=application custom-elements-app

To install the custom-element package described above once it has been published, run the following command:

ng add custom-element

Alternatively, you can move custom-element-0.0.0.tgz, described above, into the top directory of custom-elements-app and install the package using the following command:

ng add custom-element-0.0.0.tgz

Once the custom element has successfully been added, you can use the custom element within your HTML using the following tag:

<custom-element></custom-element>

Add Custom Elements To An Existing Application

If you want to add a custom element application called example-element to an existing workspace, you can run the following command:

ng generate @ngce/schematics:application --applicationType=customElement example-element

This will configure src/app/app.module.ts in your main application to use the example-element custom element tag.

You can then build the custom element by using a command that follows the pattern npm run build-<custom_element_name>:

npm run build-example-element