ov-components: update build process and module definition for improved structure

openvidu-components-angular/angular.json

@@ -18,7 +18,8 @@
 					"builder": "@angular-devkit/build-angular:application",
 					"options": {
 						"outputPath": {
-							"base": "dist/openvidu-components-testapp"
+							"base": "dist/openvidu-components-testapp",
+							"browser": ""
 						},
 						"index": "src/index.html",
 						"polyfills": ["zone.js"],
@@ -158,16 +159,17 @@
 					"builder": "@angular-devkit/build-angular:application",
 					"options": {
 						"outputPath": {
-              "base": "dist/openvidu-webcomponent-rc"
-            },
-            "index": "src/index.html",
+							"base": "dist/openvidu-webcomponent-rc",
+							"browser": ""
+						},
+						"index": "src/index.html",
 						"polyfills": ["zone.js"],
 						"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
 						"aot": true,
 						"assets": ["src/favicon.ico"],
 						"styles": ["src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss"],
-            "scripts": [],
-            "browser": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts"
+						"scripts": [],
+						"browser": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts"
 					},
 					"configurations": {
 						"production": {
@@ -181,7 +183,7 @@
 							"outputHashing": "none",
 							"sourceMap": false,
 							"namedChunks": false,
-              "extractLicenses": true,
+							"extractLicenses": true,
 							"budgets": [
 								{
 									"type": "initial",

openvidu-components-angular/openvidu-webcomponent-build.js

@@ -1,15 +1,15 @@
-const fs = require('fs-extra');
-const concat = require('concat');
-const VERSION = require('./package.json').version;
+import fs from 'fs-extra';
+import concat from 'concat';
+const packageJson = fs.readJSONSync('./package.json');
+const VERSION = packageJson.version;
 const ovWebcomponentRCPath = './dist/openvidu-webcomponent-rc';
 const ovWebcomponentProdPath = './dist/openvidu-webcomponent';
 
-module.exports.buildWebcomponent = async () => {
+export const buildWebcomponent = async () => {
 	console.log('Building OpenVidu Web Component (' + VERSION + ')');
 	const tutorialWcPath = '../../openvidu-tutorials/openvidu-webcomponent/web';
 	const e2eWcPath = './e2e/webcomponent-app';
 
-
 	try {
 		await buildElement();
 		await copyFiles(tutorialWcPath);
@@ -23,16 +23,21 @@ module.exports.buildWebcomponent = async () => {
 };
 
 async function buildElement() {
-	const files = [`${ovWebcomponentRCPath}/runtime.js`, `${ovWebcomponentRCPath}/main.js`, `${ovWebcomponentRCPath}/polyfills.js`];
-
+	const files = [`${ovWebcomponentRCPath}/polyfills.js`, /*`${ovWebcomponentRCPath}/runtime.js`,*/ `${ovWebcomponentRCPath}/main.js`];
 	try {
+		for (const file of files) {
+			if (!fs.existsSync(file)) {
+				console.error(`Error: File ${file} does not exist`);
+				throw new Error(`Missing required file: ${file}`);
+			}
+		}
 		await fs.ensureDir('./dist/openvidu-webcomponent');
 		await concat(files, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.js`);
 		await fs.copy(`${ovWebcomponentRCPath}/styles.css`, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.css`);
-		// await fs.copy(
-		// 	"./dist/openvidu-webcomponent/assets",
-		// 	"./openvidu-webcomponent/assets"
-		// );
+
+		if (fs.existsSync(`${ovWebcomponentRCPath}/assets`)) {
+			await fs.copy(`${ovWebcomponentRCPath}/assets`, `${ovWebcomponentProdPath}/assets`);
+		}
 	} catch (err) {
 		console.error('Error executing build function in webcomponent-builds.js');
 		throw err;
@@ -57,4 +62,4 @@ async function copyFiles(destination) {
 	}
 }
 
-this.buildWebcomponent();
+await buildWebcomponent();

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts

@@ -1,15 +1,19 @@
 import { OpenviduWebComponentModule } from './openvidu-webcomponent.module';
-import { enableProdMode } from "@angular/core";
-import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import { environment } from "../../environments/environment";
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { environment } from '../../environments/environment';
+import 'zone.js';
 
-  if (environment.production) {
-    enableProdMode();
-  }
+if (environment.production) {
+	enableProdMode();
+}
 
-  /**
-   *
-   * @internal
-   */
-  const bootstrap = () => platformBrowserDynamic().bootstrapModule(OpenviduWebComponentModule);
-  bootstrap().catch(err => console.error(err));
+/**
+ *
+ * @internal
+ */
+platformBrowserDynamic()
+	.bootstrapModule(OpenviduWebComponentModule, {
+		ngZone: 'zone.js' // Especificar explícitamente la zona
+	})
+	.catch((err) => console.error('Error bootstrapping webcomponent:', err));

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts

@@ -20,10 +20,10 @@ export class OpenviduWebComponentModule implements DoBootstrap {
 	constructor(private injector: Injector) {}
 
 	ngDoBootstrap(): void {
-		const element = createCustomElement(OpenviduWebComponentComponent, {
+		const elementConstructor = createCustomElement(OpenviduWebComponentComponent, {
 			injector: this.injector
 		});
 
-		customElements.define('openvidu-webcomponent', element);
+		customElements.define('openvidu-webcomponent', elementConstructor);
 	}
 }