@wavemaker/angular-codegen 12.0.0-next.46502 → 12.0.0-next.47809

package/build-angular-app.js

@@ -0,0 +1,501 @@
+
+/**
+ *  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 = async (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}`);
+    }
+};
+
+/**
+ *
+ * @param lockFile
+ * @param timeout
+ * @returns {Promise<void>}
+ */
+const waitForLock = async (lockFile, timeout) => {
+    timeout = timeout || 20 * 60 * 1000 // Wait for 20 minutes (timeout in milliseconds)
+    // Helper function to wait for the lock to be released with a timeout
+    const startTime = Date.now();
+    while (fs.existsSync(lockFile)) {
+        if (Date.now() - startTime > timeout) {
+            console.error('Timeout!! - waiting for the lock to be released. Exiting...');
+            process.exit(1); // Terminate the process with an error code
+        }
+        await sleep(1000); // Wait for 1 second before checking again
+    }
+};
+
+/**
+ *
+ * @param ms
+ * @returns {Promise<unknown>}
+ */
+const sleep = (ms) => {
+    // Helper function to sleep for a given time
+    return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+/**
+ * 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 = async (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"), LOCK_FILE = path.join(TARBALL_DOWNLOAD_PATH, ".LOCK");
+
+    //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)) {
+                // Check if another process is already installing
+                if (fs.existsSync(LOCK_FILE)) {
+                    console.log(`Waiting for another build to complete npm install... for package ${PACKAGE_NAME}`);
+                    await waitForLock(LOCK_FILE, 20 * 60 * 1000); // Wait for 20 minutes (timeout in milliseconds)
+                } else {
+                    // Acquire the lock
+                    fs.mkdirSync(TARBALL_DOWNLOAD_PATH, { recursive: true });
+                    fs.writeFileSync(LOCK_FILE, "PROGRESS");
+                    await 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 {
+            await processAngularAppPackage(TARBALL_DOWNLOAD_PATH, args.appTarget, PACKAGE_NAME, false);
+        }
+    } catch (err) {
+        deleteFiles([SUCCESS_FILE, LOCK_FILE])
+        console.log(MSG_NG_RUNTIME_LOG + `Something went wrong - for package ${PACKAGE_NAME}`, err);
+        process.exit(err.code || err.pid);
+    } finally {
+        //cleanup : in windows / optimizeUIBuild is false, we need to delete the temp downloaded package
+        if (args.optimizeUIBuild) {
+            deleteFiles([path.join(TARBALL_DOWNLOAD_PATH, 'package'), path.join(TARBALL_DOWNLOAD_PATH, ANGULAR_APP_TARBALL_NAME), LOCK_FILE])
+        }
+    }
+
+    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
+ * @param {*} baseDir
+ * @returns
+ */
+const buildAppInWMMode = async (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 = await 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, baseDir) => {
+    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, global.buildConfigObj, baseDir);
+        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
+    }
+    await 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.generateOverrideCSS) {
+        const { generateOverrideCSS } = require(CODEGEN_INSTALLATION + 'src/gen-app-override-css.js');
+        await generateOverrideCSS(buildConfigObj, sourceDir, baseDir);
+    }
+    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, baseDir);
+    } else if (buildType === BUILD_TYPE.WM) {
+        await buildAppInWMMode(sourceDir, baseDir);
+    } else if (buildType === BUILD_TYPE.ANGULAR) {
+        if(!isWebComponentBuild) {
+            await generateAngularApp(sourceDir, getNgBuildParams(), CODEGEN_INSTALLATION, appTarget, baseDir);
+        }
+        //pre - run the custom for this project
+        await global.buildConfigObj.hooks.preBuildHook();
+
+        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
+}

package/dependencies/app.component.html

@@ -0,0 +1,40 @@
+@if (startApp) {
+    @if(enableSkipToMainContent) {
+        <div id="app-focus-start" tabindex="-1"></div>
+        <a href="javascript:void(0);" class="skip" (click)="skipToAppContent($event)">{{appLocale.LABEL_SKIP_TO_MAIN_CONTENT || 'Skip to main content'}}</a>
+    }
+    <router-outlet></router-outlet>
+  @if (isApplicationType) {
+    <div wmContainer partialContainer content="Common" hidden class="ng-hide"></div>
+  }
+  <app-spinner name="globalspinner" classname="global-spinner" role="alert" aria-live="assertive" [attr.aria-label]="spinner.arialabel || 'Loading'" [show]="spinner.show" [spinnermessages]="spinner.messages"></app-spinner>
+  <div wmDialog name="oAuthLoginDialog" title="Application is requesting you to sign in with"
+    close.event="closeOAuthDialog()">
+    <ng-template #dialogBody>
+      <ul class="list-items">
+        @for (provider of providersConfig; track provider) {
+          <li class="list-item">
+            <button class="btn" (click)="provider.invoke()">{{provider.name}}</button>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  </div>
+  <div wmConfirmDialog name="_app-confirm-dialog" title.bind="title" message.bind="message" oktext.bind="oktext"
+    canceltext.bind="canceltext" closable="false" iconclass.bind="iconclass"
+  escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  @if (!isApplicationType) {
+    <div  wmConfirmDialog name="PrefabConfirmDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
+      canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
+    escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  }
+  @if (!isApplicationType) {
+    <div  wmAlertDialog name="PrefabAlertDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
+      canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
+    escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  }
+  <div wmAppExt></div>
+  <i id="wm-mobile-display"></i>
+}
+<!--Dummy container to create the component dynamically-->
+<ng-container #dynamicComponent></ng-container>