This is a Schematic implementation used to create Angular applications that support custom elements.
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.
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
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>
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