@wavemaker/angular-codegen 11.10.0-next.47275 → 11.10.0-rc.198

package/angular-app/src/framework/services/customwidget-config-provider.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+import { CustomwidgetConfigProvider } from '@wm/runtime/base';
+
+import { getCustomWidgetConfig } from '../util/page-util';
+
+@Injectable()
+export class CustomwidgetConfigProviderService extends CustomwidgetConfigProvider {
+
+    public getConfig(widgetname: string): Promise<any> {
+        return Promise.resolve(getCustomWidgetConfig(widgetname));
+    }
+}

package/angular-app/src/framework/util/page-util.ts

@@ -0,0 +1,7 @@
+const prefabConfigs = new Map<string, any>();
+const customWidgetConfigs = new Map<string, any>();
+
+export const registerPrefabConfig = (prefabName: string, config: any) => prefabConfigs.set(prefabName, config);
+export const getPrefabConfig = prefabName => prefabConfigs.get(prefabName);
+export const registerCustomWidgetConfig = (customWidget: string, config: any) => customWidgetConfigs.set(customWidget, config);
+export const getCustomWidgetConfig = customWidget => customWidgetConfigs.get(customWidget);

package/angular-app/src/main.ts

@@ -0,0 +1,67 @@
+import { ApplicationRef, enableProdMode, NgModuleRef } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+import initWmProjectProperties from './app/wm-project-properties';
+import { WMAppProperties } from './app/wmProperties';
+import * as fontConfig from './font.config';
+
+
+let formatAcceptHeader = (languages: any) => {
+  let result: string[] = [];
+  let addedLanguages = new Set<string>(); // To track already added languages
+  let qValue = 1.0;
+
+  languages.forEach((lang: any) => {
+    if (!addedLanguages.has(lang)) {
+      // Add the full language (e.g., en-US or en) if not already added
+      result.push(`${lang}${qValue === 1.0 ? '' : `;q=${qValue.toFixed(1)}`}`);
+      addedLanguages.add(lang);
+      // Decrease qValue for the next language
+      qValue = Math.max(0.1, qValue - 0.1); // Decrease qValue, minimum is 0.1
+    }
+
+    // If language has a region code (e.g., en-US), also add the base language (e.g., en)
+    if (lang.includes('-')) {
+      const baseLang = lang.split('-')[0];
+      if (!addedLanguages.has(baseLang)) {
+        result.push(`${baseLang};q=${qValue.toFixed(1)}`);
+        addedLanguages.add(baseLang);
+
+        // Decrease qValue for the next language
+        qValue = Math.max(0.1, qValue - 0.1);
+      }
+    }
+  });
+
+  return result.join(',');
+}
+WMAppProperties['preferredLanguage'] = formatAcceptHeader(navigator.languages);
+WMAppProperties['fontConfig'] = fontConfig;
+
+
+(window as any)._WM_APP_PROPERTIES  = WMAppProperties
+initWmProjectProperties();
+
+if (environment.production) {
+    enableProdMode();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new Promise<Event | void>( resolve => {
+        if (window['cordova']) {
+            document.addEventListener('deviceready', resolve);
+        } else {
+            resolve();
+        }
+    }).then(() => platformBrowserDynamic().bootstrapModule(AppModule))
+        .then((appModuleRef: NgModuleRef<AppModule>) => {
+            const applicationRef = appModuleRef.injector.get(ApplicationRef);
+            window.addEventListener('unload', () => {
+                applicationRef.components.map(c => c && c.destroy());
+            });
+            console.timeEnd('bootstrap'), err => console.log(err);
+        }, err => console.log(err));
+});

{angular-codegen → package}/angular-app/src/setup-jest.js

@@ -1,9 +1,12 @@
-import "jest-preset-angular/setup-jest";
+// This file is automatically loaded when running `jest` commands
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
 import { ToastrModule } from 'ngx-toastr';
 import { TestBed } from '@angular/core/testing';
 import _ from 'lodash-es';
 import 'jest-canvas-mock';
 
+setupZoneTestEnv();
+
 // Mock global objects if necessary
 global.jQuery = require("jquery");
 global.$ = global.jQuery;

{angular-codegen → package}/angular-app/tsconfig.json

@@ -41,6 +41,9 @@
             "@wavemaker/variables": [
                 "node_modules/@wavemaker/variables/"
             ],
+            "@wavemaker/custom-widgets-m3": [
+                "node_modules/@wavemaker/custom-widgets-m3/"
+            ],
             "@wm/components/base": [
                 "node_modules/@wavemaker/app-ng-runtime/components/base"
             ],

package/build-angular-app.js

@@ -0,0 +1,463 @@
+
+/**
+ *  Download and install the app-ng-runtime package
+ *  Run the build and post build for the generated angular app.
+ *  
+ *  CONSOLE ARGUMENTS:-
+ *  nodeVMArgs:String: Node environment params  (Eg: '--max-old-space-size=2040')
+ *  ngBuildParams:String: Anglar build params (Eg: '--prod=true --source-map=false')
+ *  runtimeUIVersion:String: Runtime version (Eg: 10.6.6-next.10243)
+ *  appSrc:String: Source folder to generate the angular app (current directory Eg: '.')
+ *  appTarget:String: Target folder to save the generated app (Eg: 'target/ui-build/generated-app')
+ *  codegenPath:String: Input to the codegen-CLI -->  Codegen installation path to copy the angular-template-app
+ *  optimizeUIBuild : By default this flag will be true. If it's windows platform we are making the flag to false, it means no optimisation for windows.
+ */
+const fs = require('fs');
+const rimraf = require('rimraf');
+const { downloadNPMPackage } = require('./download-packages');
+const { generateRandomHash } = require('./src/wm-utils');
+const archiver = require('archiver');
+const path = require("path");
+const { executeSyncCmd,  MSG_NG_RUNTIME_LOG, MSG_NG_RUNTIME_SUCCESS } = require('./build-util');
+const os = require("os");
+const cheerio = require(`cheerio`);
+
+const NPM_PACKAGE_SCOPE = '@wavemaker';
+const BUILD_TYPE = { WM: 'wm', ANGULAR: 'angular' };
+
+const UI_BUILD_ERROR_LOG = 'UI BUILD ERROR';
+const MSG_CODEGEN_LOG = 'CODEGEN ANGULAR APP: ';
+const MSG_APP_RUNTIME_WM_BUILD_LOG = 'APP RUNTIME WM BUILD : ';
+const MSG_APP_RUNTIME_WM_BUILD_SUCCESS = 'WAVEMAKER_APP_RUNTIME_WM_BUILD_SUCCESS';
+
+const ANGULAR_APP_TEMPLATE_NAME = "angular-app";
+
+/**
+ * @TODO: This is a temporary workaround to extract deploy-url from 'ngBuildParams', need to be replaced in future.
+ */
+const updateDeployUrl = (args) => {
+    let buildArgs = args.ngBuildParams.split(' ');
+    const deployParam = buildArgs.find(i => i.startsWith("--deploy-url="));
+    if(!deployParam) {
+        buildArgs.push(`--deploy-url=ng-bundle/${global.randomHash}/`);
+    } else {
+        buildArgs.filter((param, index) => {
+            if (param.includes('--deploy-url=_cdnUrl_')) {
+                buildArgs[index] = `--deploy-url=_cdnUrl_/ng-bundle/${global.randomHash}/`
+                return true;
+            }
+        });
+    }
+    buildArgs.push(args.nodeVMArgs);
+    return buildArgs.join(" ");
+};
+/**
+ *
+ * @param sourcePath
+ * @param targetPath
+ * @param packageName
+ * @param isOptimized
+ */
+const processAngularAppPackage = (sourcePath, targetPath, packageName, isOptimized) => {
+    const ANGULAR_APP_TARBALL_NAME = 'wavemaker' + '-' + ANGULAR_APP_TEMPLATE_NAME + '-' + global.buildConfigObj.runtimeUIVersion + '.tgz';
+    try {
+        // Download the package as a tarball
+        executeSyncCmd(
+            `cd ${sourcePath} && npm pack ${packageName}`,
+            (e) => { throw new Error(`Failed to download package: ${packageName}, Error: ${e}`); },
+            `Downloading tarball - ${packageName} to ${sourcePath}`
+        );
+        // Extract the tarball
+        executeSyncCmd(
+            `cd ${sourcePath} && tar -xvf ${ANGULAR_APP_TARBALL_NAME}`,
+            (e) => { throw new Error(`Failed to extract package: ${packageName}, Error: ${e}`); },
+            `Unzipping tarball - ${ANGULAR_APP_TARBALL_NAME}`
+        );
+
+        // Copy essential files
+        ['package.json', 'package-lock.json', '.npmrc'].forEach(file => {
+            fs.copyFileSync( path.join(sourcePath, 'package', file), path.join(targetPath, file) );
+        });
+
+        // Install dependencies
+        const installPath = isOptimized ? sourcePath : targetPath;
+        let npmCommnd = `npm install --prefix ${installPath}`
+        // For windows platforms, npm install command needs to be executed in the same directory as package.json file
+        if (os.platform() === 'win32') {
+            npmCommnd = `cd ${installPath} && ${npmCommnd}`
+        }
+        executeSyncCmd(
+            `${npmCommnd}`,
+            (e) => { throw new Error(`Failed to install dependencies: ${packageName}, Error: ${e}`); },
+            `Installing app dependencies to ${installPath}`
+        );
+    } catch (error) {
+        if (isOptimized) rimraf.sync(`${sourcePath}/node_modules`);
+        throw new Error(`Something went wrong : ${packageName}, Error: ${error}`);
+    }
+};
+
+
+/**
+ * Download the app runtime package
+ * Symlink to reuse the existing node modules (If windows optimizeUIBuild will be false and install all node modules every build )
+ * Run the ng build and post build for the project
+ */
+const buildAngularApp = (args) => {
+    const HOME_DIR = os.homedir();
+    let TARBALL_DOWNLOAD_PATH = path.join((path.join(HOME_DIR, '.wm', 'node_modules')), ANGULAR_APP_TEMPLATE_NAME, args.runtimeUIVersion);
+    const PACKAGE_NAME = NPM_PACKAGE_SCOPE + '/' + ANGULAR_APP_TEMPLATE_NAME + '@' + global.buildConfigObj.runtimeUIVersion;
+    const SUCCESS_FILE = path.join(TARBALL_DOWNLOAD_PATH, ".SUCCESS");
+
+    //to handle windows build(optimizeUIBuild will be false for windows)
+    TARBALL_DOWNLOAD_PATH = args.optimizeUIBuild ? TARBALL_DOWNLOAD_PATH : args.appTarget;
+    const ANGULAR_APP_TARBALL_NAME = 'wavemaker' + '-' + ANGULAR_APP_TEMPLATE_NAME + '-' + global.buildConfigObj.runtimeUIVersion + '.tgz';
+
+    fs.mkdirSync(TARBALL_DOWNLOAD_PATH, { recursive: true });
+
+    try {
+        if (args.optimizeUIBuild) {
+            if (!fs.existsSync(SUCCESS_FILE)) {
+                processAngularAppPackage(TARBALL_DOWNLOAD_PATH, TARBALL_DOWNLOAD_PATH, PACKAGE_NAME, true);
+                fs.writeFileSync(SUCCESS_FILE, "SUCCESS");
+            } else {
+                console.log(`node_modules for angular-app already installed - ${TARBALL_DOWNLOAD_PATH}`);
+            }
+            console.log(`Symlinking the node_modules to angular-app - ${args.appTarget}`);
+            fs.symlinkSync( `${TARBALL_DOWNLOAD_PATH}/node_modules`,`${args.appTarget}/node_modules`,'dir');
+        } else {
+            processAngularAppPackage(TARBALL_DOWNLOAD_PATH, args.appTarget, PACKAGE_NAME, false);
+        }
+    } catch (err) {
+        deleteFiles([SUCCESS_FILE])
+        console.log(MSG_NG_RUNTIME_LOG + 'Something went wrong - ', err);
+        process.exit(err.code || err.pid);
+    } finally {
+        //cleanup : in windows / optimizeUIBuild is false, we need to delete the temp downloaded package
+        deleteFiles([path.join(TARBALL_DOWNLOAD_PATH, 'package'), path.join(TARBALL_DOWNLOAD_PATH, ANGULAR_APP_TARBALL_NAME)])
+    }
+
+    let ngBuildParams = updateDeployUrl(args);
+    const NG_BUILD_MSG = 'NG BUILD MIGHT HAVE FAILED WITH HEAP OUT OF MEMORY, RE-EXECUTE THE BUILD BY INCREASING THE MAX-OLD-SPACE-SIZE ARGUMENT VALUE FOR BUILD.UI.NODE.ARGS PROPERTY IN DEPLOYMENT PROFILE';
+    // Generating the angular build and post build process.
+    executeSyncCmd('cd ' + args.appTarget + ' && node ./build-scripts/build.js ' + ngBuildParams, null, MSG_NG_RUNTIME_LOG, false, NG_BUILD_MSG);
+}
+
+/**
+ *
+ */
+const deleteFiles = (files) => {
+    files.forEach(file => {
+        try {
+            rimraf.sync(file);
+            console.log(`Successfully deleted file - ${file}`);
+        } catch (err) {
+            console.error(`Error while deleting file ${file}`, err);
+            throw new Error(`Error while deleting file: ${file}, Error: ${err}`);
+        }
+    });
+}
+
+const generateUiZip = async( sourceDir ) => {
+    return new Promise((resolve, reject) => {
+        const distDir = path.resolve(sourceDir + '/target/ui-build/output-files');
+        const zipFile = path.resolve(sourceDir + '/target/ui-artifact.zip');
+
+        const output = fs.createWriteStream(zipFile);
+        const archive = archiver('zip', {
+            zlib: {level: 9}
+        });
+        output.on('close', () => {
+            console.log(`✅ ui-artifact.zip created successfully: ${zipFile}`);
+            resolve();
+        });
+        archive.on('error', (err) => {
+            reject(err);
+        });
+        archive.pipe(output);
+        archive.directory(distDir, false);
+        archive.finalize();
+    });
+}
+
+const updateWarIndexHtml = async( sourceDir ) => {
+    const destDir = path.resolve(sourceDir + '/target/ui-build/output-files');
+    let indexHtml = fs.readFileSync(destDir + '/index.html', 'utf8');
+
+    const $ = cheerio.load(indexHtml);
+    const cdnMetaTag = $('meta[name="cdnUrl"]');
+    const cdnUrl = cdnMetaTag.length > 0 ? cdnMetaTag.attr('content') : `ng-bundle/${global.randomHash}/`;
+
+    $('*').each((_, element) => {
+        if (element.tagName === 'meta' && $(element).attr('name') === 'cdnUrl') {
+            $(element).attr('content', `ng-bundle/${global.randomHash}/`)
+            return;
+        }
+        const attributes = element.attribs;
+        for (const attrName in attributes) {
+            if (attributes[attrName].includes(cdnUrl)) {
+                attributes[attrName] = attributes[attrName].replace(cdnUrl, `_cdnUrl_/ng-bundle/${global.randomHash}/`);
+            }
+        }
+    });
+
+    const updatedHtml = $.html();
+    fs.writeFileSync(destDir + '/index.html', updatedHtml);
+    console.log(`✅ Updated index.html in the war file`);
+}
+
+/**
+ * sample obj param structure
+ * buildConfigObj = {
+ *  runtimeUIVersion: args.runtimeUIVersion ,
+ *  codegenPath: pathAngularCodegen,
+ *  optimizeUIBuild: angularBuildConfig.optimizeUIBuild,
+ *  appTarget: angularBuildConfig.appTarget,
+ *  appSrc: angularBuildConfig.sourceDir,
+ *  nodeVMArgs: args.nodeVMArgs,
+ *  ngBuildParams: ngBuildParams
+ * }
+ * @param buildConfigObj
+ * @returns {Promise<void>}
+ */
+const postBuild = async( buildConfigObj ) => {
+    console.log(`Running post build ops with the build config ${JSON.stringify(buildConfigObj)}`);
+    await generateUiZip(buildConfigObj.appSrc);
+    await updateWarIndexHtml(buildConfigObj.appSrc);
+}
+
+/**
+ * Read the console arguments and prepare the object.
+ * @returns console arguments as key value pairs
+ */
+const getArgs = (customArgs) => {
+    const args = {};
+    let arguments = customArgs || process.argv;
+    arguments = customArgs ? customArgs : arguments.slice(2, arguments.length);
+    arguments.forEach(arg => {
+        if (arg.slice(0, 2) === '--') {
+            const longArg = arg.split('=');
+            const longArgFlag = longArg[0].slice(2, longArg[0].length);
+            let longArgValue = longArg.length > 2 ? longArg.slice(1, longArg.length).join('=') : longArg[1];
+            if (longArgFlag === "cdnUrl") {
+                longArgValue = longArgValue === "" ? "./" : longArgValue;
+            }
+            args[longArgFlag] = longArgValue;
+        }
+    });
+    return args;
+}
+
+/**
+ * Copy source to destination each file by navigating to the folder recursively
+ * @param {string} src  Source folder to copy.
+ * @param {string} dest Destination folder to copy.
+ */
+const copyRecursiveSync = (src, dest) => {
+    let exists = fs.existsSync(src), stats = exists && fs.statSync(src), isDirectory = exists && stats.isDirectory();
+    if (isDirectory) {
+        if (!fs.existsSync(dest)) {
+            fs.mkdirSync(dest, { recursive: true });
+        }
+        fs.readdirSync(src).forEach(function (childItemName) {
+            copyRecursiveSync(src + '/' + childItemName, dest + '/' + childItemName);
+        });
+    } else {
+        fs.copyFileSync(src, dest);
+    }
+};
+
+/**
+ *  Check the app-runtime-wm-build npm package already installed or not.
+ *  Install the app-runtime-wm-build if package not yet installed.
+ *  Based on the platform type copy the bundle script into '/src/main/webapp'
+ * @param {*} sourceDir
+ * @returns
+ */
+const buildAppInWMMode = (sourceDir, baseDir) => {
+
+    /**
+     * Download app-runtime-wm-build package and install if it doesn't exist
+     */
+    let appRuntimeWMBuildPackageInfo = {
+        scope: NPM_PACKAGE_SCOPE,
+        version: global.buildConfigObj.runtimeUIVersion,
+        name: 'app-runtime-wm-build',
+        packageJsonFile: '',
+        successMsg: MSG_APP_RUNTIME_WM_BUILD_SUCCESS,
+        infoMsg: MSG_APP_RUNTIME_WM_BUILD_LOG
+    };
+
+    appRuntimeWMBuildPackageInfo.baseDir = baseDir;
+    const PATH_WAVEMAKER_APP_RUNTIME_WM_BUILD = downloadNPMPackage(appRuntimeWMBuildPackageInfo);
+
+    const FILE_PATH_WAVEMAKER_APP_RUNTIME_WM_BUILD = PATH_WAVEMAKER_APP_RUNTIME_WM_BUILD + '/node_modules/' + appRuntimeWMBuildPackageInfo.scope + '/' + appRuntimeWMBuildPackageInfo.name + '/';
+
+    const PLATFORM_TYPE = { WEB: 'wmapp', MOBILE: 'wmmobile' }
+    let bundleFolder = '';
+    if (global.buildConfigObj.platformType === PLATFORM_TYPE.WEB) {
+        bundleFolder = 'wmapp/';
+    } else if (global.buildConfigObj.platformType = PLATFORM_TYPE.MOBILE) {
+        bundleFolder = 'wmmobile/';
+    } else {
+        console.log(UI_BUILD_ERROR_LOG + ' Invalid script path!');
+        return;
+    }
+    copyRecursiveSync(FILE_PATH_WAVEMAKER_APP_RUNTIME_WM_BUILD + bundleFolder, sourceDir + '/target/ui-build/output-files/' + bundleFolder);
+}
+
+/**
+ *
+ * @param {*} sourceDir project source directory to generate the angular app
+ * @param {*} ngBuildParams angular app build params along with cdn URL
+ * @param {*} codegenPath codegen path to generate the angular app
+ *  Generate the angular app from codegen in target folder
+ */
+const generateAngularApp = async (sourceDir, ngBuildParams, codegenPath, appTarget) => {
+    const CODEGEN_PATH = codegenPath + 'src/codegen-cli.js';
+    if (fs.existsSync(CODEGEN_PATH)) {
+        let deployUrl = `ng-bundle/${global.randomHash}/`;
+        if(ngBuildParams) {
+            let buildArgs = getArgs(ngBuildParams.split(' '));
+            if (buildArgs && buildArgs["deploy-url"]) {
+                deployUrl = buildArgs["deploy-url"];
+            }
+        }
+        const { generateCodegenAngularApp } = require(CODEGEN_PATH);
+        console.log(MSG_CODEGEN_LOG + 'Generating the angular App...');
+        let apiUrl = global.buildConfigObj.apiUrl && global.buildConfigObj.apiUrl.trim() !== "" ? global.buildConfigObj.apiUrl.trim() : "./";
+        console.log("API-Url - ", apiUrl, " - CDN-Url - ", deployUrl);
+        await generateCodegenAngularApp(sourceDir, appTarget, deployUrl, (global.buildConfigObj.pwa === 'true' ? true : false), codegenPath, global.buildConfigObj.csp === 'true', global.buildConfigObj.spa === 'true', apiUrl);
+        console.log(MSG_CODEGEN_LOG + 'Angular app generated !');
+    } else {
+        console.log(MSG_CODEGEN_LOG + " : CODEGEN-CLI not found");
+    }
+}
+
+/**
+ *
+ * @param {*} sourceDir
+ * @param {*} appTarget
+ * @param {*} generate_page The generated page name
+ * @param {*} codegenPath
+ */
+const generateAngularAppPage = async (sourceDir, appTarget, generate_page, codegenPath) => {
+    const CODEGEN_PATH = codegenPath + 'src/codegen-cli.js';
+    if (fs.existsSync(CODEGEN_PATH)) {
+        const { generatePage } = require(CODEGEN_PATH);
+        await generatePage(sourceDir, appTarget, generate_page, codegenPath, global.buildConfigObj.csp === 'true');
+    } else {
+        console.log(MSG_CODEGEN_LOG + " : CODEGEN-CLI not found")
+    }
+
+}
+
+/**
+ * validate the cdn url and returns the angular build params
+ * @returns build params
+ */
+const getNgBuildParams = () => {
+    let cdnUrl = global.buildConfigObj.cdnUrl && global.buildConfigObj.cdnUrl.trim() !== "" ? global.buildConfigObj.cdnUrl.trim() : "./";
+    let ngBuildParams = global.buildConfigObj.ngBuildParams;
+    // if the cdn url doesn't contain ng-bundle append it
+    // this is required for BE/FE separation. Now index.html file gets served directly from cdn bucket so there is no replacement
+    // happening from the server. So need to validate and properly create the URL from cdnUrl param passed and append ng-bundle
+    if (cdnUrl) {
+        cdnUrl = (cdnUrl.slice(-1) === "/" ? cdnUrl.slice(0, -1) : cdnUrl);
+        cdnUrl = cdnUrl + `/ng-bundle/${global.randomHash}/`;
+        ngBuildParams += ` --deploy-url=${cdnUrl}`;
+    }
+    return ngBuildParams;
+}
+
+/**
+ *  Check codegen npm package already installed or not.
+ *  Install the codegen if package not yet installed.
+ *  Run generate and build angular script.
+ *  Prepare the ng-build params deploy url if cdn url present in arguments
+ * @param {*} angularBuildConfig
+ *  Properties: sourceDir,appTarget, baseDir
+ */
+const buildAppInAngularMode = async (angularBuildConfig) => {
+    let ngBuildParams = getNgBuildParams();
+    let buildConfigObj = {
+        runtimeUIVersion: global.buildConfigObj.runtimeUIVersion,
+        codegenPath: global.buildConfigObj.codegenPath,
+        optimizeUIBuild: global.buildConfigObj.optimizeUIBuild,
+        appTarget: angularBuildConfig.appTarget,
+        appSrc: angularBuildConfig.sourceDir,
+        nodeVMArgs: global.buildConfigObj.nodeVMArgs,
+        ngBuildParams: ngBuildParams
+    }
+    buildAngularApp(buildConfigObj);
+    copyRecursiveSync(angularBuildConfig.sourceDir + '/target/ui-build/generated-app/dist/', angularBuildConfig.sourceDir + '/target/ui-build/output-files/');
+
+    await postBuild(buildConfigObj)
+}
+
+/**
+ *
+ * @param
+ * @returns {Promise<void>}
+ */
+const buildAsWebComponent = async () => {
+    let wcCommand = "npx --yes @wavemaker/webcomponents-cli -s ."
+    executeSyncCmd(wcCommand, () => {
+        console.log('Something wrong with WebComponent build');
+    }, 'Building WebComponent');
+}
+
+const initBuild = async (buildConfigObj) => {
+    global.randomHash = generateRandomHash();
+    //making it global
+    global.buildConfigObj = buildConfigObj;
+
+    let buildType = buildConfigObj.buildType, isWebComponentBuild = buildConfigObj.exportWebComponent === 'true';
+    if(isWebComponentBuild) {
+        buildType = BUILD_TYPE.ANGULAR;
+    }
+    let CODEGEN_INSTALLATION = buildConfigObj.codegenPath
+    const sourceDir = buildConfigObj.appSrc;
+    let appTarget = buildConfigObj.appTarget;
+
+    let baseDir = buildConfigObj.optimizeUIBuild ? undefined : appTarget.split('/').slice(0, 2).join('/') + '/';
+    if (buildConfigObj.generate_page) {
+        // To generate the angular app specific page
+        await generateAngularAppPage(sourceDir, appTarget, buildConfigObj.generate_page, CODEGEN_INSTALLATION);
+    } else if (buildConfigObj.generateAngularApp) {
+        // TO generate the angular app
+        console.log('Angular app generation mode');
+        await generateAngularApp(sourceDir, getNgBuildParams(), CODEGEN_INSTALLATION, appTarget);
+    } else if (buildType === BUILD_TYPE.WM) {
+        buildAppInWMMode(sourceDir, baseDir);
+    } else if (buildType === BUILD_TYPE.ANGULAR) {
+        if(!isWebComponentBuild) {
+            await generateAngularApp(sourceDir, getNgBuildParams(), CODEGEN_INSTALLATION, appTarget);
+        }
+
+        //pre - run the custom for this project
+        await global.buildConfigObj.hooks.preBuildHook();
+
+        if(!isWebComponentBuild) {
+            const { generateOverrideCSS } = require(CODEGEN_INSTALLATION + 'src/codegen-cli.js');
+            await generateOverrideCSS(buildConfigObj, sourceDir, baseDir);
+        }
+
+        let angularBuildConfig = {
+            sourceDir: sourceDir,
+            appTarget: appTarget,
+            baseDir: baseDir,
+        };
+        if(isWebComponentBuild) {
+            await buildAsWebComponent();
+        } else {
+            await buildAppInAngularMode(angularBuildConfig);
+        }
+        //post - run the custom for this project
+        await global.buildConfigObj.hooks.postBuildHook();
+    }
+}
+
+module.exports = {
+    initBuild
+}