Step 1: Create an Angular Project If you don't have an Angular project, create one:

bash Copiar código ng new angular-widget cd angular-widget Step 2: Install Angular Elements and Polyfills Angular provides a library called @angular/elements to create custom elements (web components).

Install Angular Elements and the polyfill:

bash Copiar código ng add @angular/elements npm install @webcomponents/custom-elements --save Step 3: Create the Angular Widget Component Create a component that you want to turn into a widget. For example, if you want to create a table widget:

bash Copiar código ng generate component my-widget In my-widget.component.ts, implement the widget functionality:

typescript Copiar código import { Component, Input } from '@angular/core';

@Component({ selector: 'app-my-widget', template: <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"> <div class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> <thead class="bg-gray-50 dark:bg-gray-800"> <tr> <th *ngFor="let column of data[0]" scope="col" class="py-3.5 px-4 text-sm font-normal text-left text-gray-500 dark:text-gray-400"> {{ column }} </th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900"> <tr *ngFor="let item of data.slice(1)"> <td *ngFor="let column of data[0]" class="px-4 py-4 text-sm whitespace-nowrap"> <span class="font-medium text-gray-800 dark:text-white">{{ item[column.toLowerCase()] }}</span> </td> </tr> </tbody> </table> </div> </div> </div> }) export class MyWidgetComponent { @Input() data: any[]; } Step 4: Convert the Component to a Web Component In app.module.ts, modify the NgModule to register the component as a custom element:

typescript Copiar código import { Injector, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { createCustomElement } from '@angular/elements'; import { MyWidgetComponent } from './my-widget/my-widget.component';

@NgModule({ declarations: [MyWidgetComponent], imports: [BrowserModule], providers: [], entryComponents: [MyWidgetComponent] }) export class AppModule { constructor(private injector: Injector) { // Create the custom element (widget) const myWidgetElement = createCustomElement(MyWidgetComponent, { injector }); customElements.define('my-widget', myWidgetElement); }

ngDoBootstrap() {} // Use ngDoBootstrap instead of bootstrap property } Step 5: Build and Bundle the Application Now, you need to build your Angular app and create a single JavaScript bundle. First, update the angular.json file to generate a single bundle without the Angular CLI's default hash names.

Go to angular.json and in the build options for your project, modify the output settings: json Copiar código "outputHashing": "none", Build the project: bash Copiar código ng build --prod --output-hashing none The built files will be located in the dist/angular-widget folder.

Step 6: Bundle into a Single JavaScript File To convert the multiple files generated into a single file, you can use a tool like rollup or webpack. Install rollup:

bash Copiar código npm install rollup --global Then create a rollup.config.js file to bundle the output:

javascript Copiar código export default { input: 'dist/angular-widget/main.js', output: { file: 'dist/widget.js', format: 'iife', // Immediately Invoked Function Expression name: 'MyWidget', } }; Run the following command to bundle the files:

bash Copiar código rollup -c rollup.config.js This will create a single widget.js file in the dist/ folder.

Step 7: Publish on UNPKG Create an NPM account if you don't have one: NPM Signup. Log in to NPM in your terminal: bash Copiar código npm login Publish your package to NPM: Ensure that your package.json file is properly set up with the necessary information.

bash Copiar código npm publish --access public Your widget will now be available via UNPKG under the URL:

perl Copiar código https://unpkg.com//dist/widget.js Step 8: Use the Widget in HTML You can now use your widget in any HTML page like this:

html Copiar código