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

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

@@ -21,28 +21,37 @@
                         "outputPath": "dist/ng-bundle",
                         "index": {
                             "input": "src/index.html",
-                            "output": "../index.html"
+                            "output": "../../index.html"
                         },
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
+                            "src/favicon.png",
                             "src/assets",
                             {
-                                "glob": "print.css",
-                                "input": "src/assets/",
-                                "output": "."
+                                "glob": "**/*",
+                                "input": "libraries/locales/moment-timezone",
+                                "output": "/locales/moment-timezone"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@wavemaker/app-ng-runtime/locales/moment-timezone",
+                                "output": "/locales/moment-timezone"
                             },
                             {
                                 "glob": "**/*",
-                                "input": "libraries/locales/",
-                                "output": "/locales/"
+                                "input": "src/servicedefs",
+                                "output": "/servicedefs/"
                             },
                             {
                                 "glob": "**/*",
-                                "input": "node_modules/@wavemaker/app-ng-runtime/locales/",
-                                "output": "/locales/"
+                                "input": "resources",
+                                "output": "/resources/",
+                                "ignore": [
+                                    "**/*.txt"
+                                ]
                             }
                         ],
                         "styles": [
@@ -58,13 +67,18 @@
                                 "input": "src/assets/app.css",
                                 "inject": false,
                                 "bundleName": "wm-styles"
+                            },
+                            {
+                                "input": "src/assets/print.css",
+                                "inject": false,
+                                "bundleName": "print"
                             }
                         ],
                         "scripts": [
-                            "./node_modules/x2js/x2js.js",
                             "./node_modules/d3/dist/d3.min.js",
                             "./node_modules/@wavemaker/nvd3/build/nv.d3.min.js",
                             "./node_modules/jquery/dist/jquery.min.js",
+                            "./node_modules/lodash/lodash.min.js",
                             "./node_modules/jquery-ui/ui/disable-selection.js",
                             "./node_modules/jquery-ui/ui/version.js",
                             "./node_modules/jquery-ui/ui/widget.js",
@@ -79,9 +93,6 @@
                             "./node_modules/@wavemaker/app-ng-runtime/scripts/datatable/datatable.js",
                             "./node_modules/@wavemaker/app-ng-runtime/scripts/swipey/swipey.jquery.plugin.js",
                             "./node_modules/@wavemaker/app-ng-runtime/scripts/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js",
-                            "./node_modules/moment/min/moment.min.js",
-                            "./node_modules/moment-timezone/builds/moment-timezone.min.js",
-                            "./node_modules/fullcalendar/main.min.js",
                             "./node_modules/summernote/dist/summernote-lite.min.js",
                             "./node_modules/hammerjs/hammer.min.js",
                             "./node_modules/iscroll/build/iscroll.js",
@@ -188,18 +199,29 @@
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
+                            "src/favicon.png",
                             "src/assets",
                             {
-                                "glob": "print.css",
-                                "input": "src/assets/",
-                                "output": "."
+                                "glob": "**/*",
+                                "input": "src/servicedefs",
+                                "output": "/servicedefs/"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "src/resources",
+                                "output": "/resources/"
                             }
                         ],
                         "styles": [
                             "src/styles.css",
                             "src/assets/styles/css/wm-style.css",
                             "src/assets/themes/material/style.css",
-                            "src/assets/app.css"
+                            "src/assets/app.css",
+                            {
+                                "input": "src/assets/print.css",
+                                "inject": false,
+                                "bundleName": "print"
+                            }
                         ],
                         "scripts": [
                             "./node_modules/x2js/x2js.js",
@@ -217,9 +239,6 @@
                             "./node_modules/jquery-ui/ui/widgets/sortable.js",
                             "./node_modules/jquery-ui/ui/widgets/droppable.js",
                             "./libraries/scripts/datatable/datatable.js",
-                            "./node_modules/moment/min/moment.min.js",
-                            "./node_modules/moment-timezone/builds/moment-timezone.min.js",
-                            "./node_modules/fullcalendar/main.min.js",
                             "./node_modules/summernote/dist/summernote-lite.min.js",
                             "./node_modules/hammerjs/hammer.min.js",
                             "./node_modules/iscroll/build/iscroll.js",

{angular-codegen → package}/angular-app/build-scripts/build.js

@@ -6,6 +6,7 @@ if (processArgs.findIndex(arg => arg.startsWith('--max-old-space-size')) !== -1)
     process.env.NODE_OPTIONS = processArgs.pop();
     console.log("Setting node options: ", process.env.NODE_OPTIONS);
 }
+
 const args = processArgs.slice(2);
 const ngBuildArgs = ['build', ...args];
 console.log("\x1b[33m", "Angular build params: ", ngBuildArgs);

{angular-codegen → package}/angular-app/build-scripts/post-build.js

@@ -6,94 +6,11 @@ const copyFile = util.promisify(fs.copyFile);
 const exec = util.promisify(require('child_process').exec);
 const cheerio = require(`cheerio`);
 const crypto = require(`crypto`);
-const opPath = `${process.cwd()}/dist/ng-bundle`;
-const copyCssFiles = (hash, updatedFilenames) => {
-    const filename = 'wm-styles.css';
-    const updatedFilename = `wm-styles.${hash}.css`
-    copyFile(`${opPath}/${filename}`, `${opPath}/${updatedFilename}`);
-    updatedFilenames[filename] = updatedFilename;
-    // copyFile(`${opPath}/wm-styles.br.css`,`${opPath}/wm-styles.${hash}.br.css`);
-    // copyFile(`${opPath}/wm-styles.gzip.css`,`${opPath}/wm-styles.${hash}.gzip.css`);
-};
-const copyMobileCssFiles = (hash, fileName) => {
-    // const name = filePath.split('.css')[0];
-    copyFile(`${opPath}/${fileName}.css`, `${opPath}/${fileName}.${hash}.css`);
-    // copyFile(`${opPath}/wm-styles.br.css`,`${opPath}/wm-styles.${hash}.br.css`);
-    // copyFile(`${opPath}/wm-styles.gzip.css`,`${opPath}/wm-styles.${hash}.gzip.css`);
-};
-const generateHash = async (filepath) => {
-    const cssContent = await readFile(filepath);
-    let hash = crypto.createHash('md5');
-    hash.update(cssContent);
-    return hash.digest('hex');
-};
-const generateHashForScripts = (updatedFilenames) => {
-    //from angular 12(IVY), scripts array in angular json, doesn't allow `@` symbol in the name/value
-    //so removed `@` from wavemaker.com in the file name and adding it back in the post-build.js file
-    const scriptsMap = {};
-    return new Promise(resolve => {
-        fs.readdir(opPath, (err, items) => {
-            const promises = items.map(i => {
-                const nohashIndex = i.indexOf('-NOHASH.js');
-                if (nohashIndex > 0) {
-                    const key = i.substring(0, nohashIndex);
-                    return generateHash(`${opPath}/${i}`).then(hash => {
-                        const filename = `${key}-NOHASH.js`;
-                        const updatedFilename = `${key}.${hash}.js`
-                        scriptsMap[`${key}.js`] = updatedFilename;
-                        updatedFilenames[filename] = updatedFilename;
-                        return Promise.all([
-                            copyFile(`${opPath}/${filename}`, `${opPath}/${updatedFilename}`),
-                            // copyFile(`${opPath}/${key}-NOHASH.br.js`, `${opPath}/${key}.${hash}.br.js`),
-                            // copyFile(`${opPath}/${key}-NOHASH.gzip.js`, `${opPath}/${key}.${hash}.gzip.js`)
-                        ]);
-                    });
-                }
-            });
-            Promise.all(promises).then(() => {
-                return writeFile(`${opPath}/path_mapping.json`, JSON.stringify(scriptsMap, null, 2));
-            }).then(resolve);
-        });
-    });
-};
-let isMobileProject = false;
+
 let isProdBuild;
 let isDevBuild;
 let $;
 
-const setMobileProjectType = (angularJson) => {
-    let styles = angularJson['projects']['angular-app']['architect']['build']['options']['styles'];
-    const androidStyles = styles.find((style) => {
-        let isObject = typeof (style) === 'object';
-        if (isObject) {
-            return style.bundleName === 'wm-android-styles';
-        }
-        return false;
-    });
-    isMobileProject = androidStyles ? true : false;
-    return isMobileProject;
-}
-const addMobileSpecificStyles = async (deployUrl) => {
-    if (isDevBuild) {
-        $("body").append(
-            `<script type="text/javascript" defer="true" src="${deployUrl}wm-android-styles.js"></script>`
-        );
-    }
-
-    if (isProdBuild) {
-        let hash = await generateHash(`${opPath}/wm-android-styles.css`);
-        copyMobileCssFiles(hash, 'wm-android-styles');
-        $("head").append(
-            `<link rel="stylesheet" theme="wmtheme" href="${deployUrl}wm-android-styles.${hash}.css" >`
-        );
-        hash = await generateHash(`${opPath}/wm-ios-styles.css`);
-        copyMobileCssFiles(hash, 'wm-ios-styles');
-        $("head").append(
-            `<link rel="stylesheet" theme="wmtheme" href="${deployUrl}wm-ios-styles.${hash}.css" >`
-        );
-    }
-}
-
 const addScriptForWMStylesPath = (wm_styles_path) => {
     // wm_styles_path will not be present for mobile apps
     if (wm_styles_path) {
@@ -201,10 +118,10 @@ const updatePwaAssets = (deployUrl, updatedFileNames, updatedFileHashes) => {
     deployUrl = deployUrl === "_cdnUrl_" ? 'ng-bundle/' : deployUrl;
 
     // copy service worker and its config to root directory
-    fs.copyFileSync('./dist/ng-bundle/ngsw-worker.js', './dist/ngsw-worker.js');
-    fs.copyFileSync('./dist/ng-bundle/wmsw-worker.js', './dist/wmsw-worker.js');
-    fs.copyFileSync('./dist/ng-bundle/ngsw.json', ngswPath);
-    fs.copyFileSync('./dist/ng-bundle/manifest.json', manifestPath);
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/ngsw-worker.js`, './dist/ngsw-worker.js');
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/wmsw-worker.js`, './dist/wmsw-worker.js');
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/ngsw.json`, ngswPath);
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/manifest.json`, manifestPath);
 
     // update the icons url in manifest.json
     const manifest = JSON.parse(fs.readFileSync(manifestPath).toString());
@@ -248,17 +165,12 @@ const generateSha1 = (content) => {
         const angularJson = require(`${process.cwd()}/angular.json`);
         const build = angularJson['projects']['angular-app']['architect']['build'];
         let deployUrl = args['deploy-url'] || build['options']['deployUrl'];
-
+        global.randomHash = deployUrl.split('/')[1];
+        let outputPath = global.opPath = args['output-path'] || build['options']['outputPath']
         const contents = await readFile(`./dist/index.html`, `utf8`);
         $ = cheerio.load(contents);
-        setMobileProjectType(angularJson);
-        if (!isMobileProject) {
-            isProdBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-styles.css`);
-            isDevBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-styles.js`);
-        } else {
-            isDevBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-android-styles.js`);
-            isProdBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-android-styles.css`);
-        }
+        isProdBuild = fs.existsSync(`${process.cwd()}/${outputPath}/wm-styles.css`);
+        isDevBuild = fs.existsSync(`${process.cwd()}/${outputPath}/wm-styles.js`);
 
         if (isProdBuild) {
             const isOptimizeCss = $('meta[optimizecss]').length;
@@ -275,18 +187,12 @@ const generateSha1 = (content) => {
         const updatedFileHashes = {}
         let wm_styles_path;
 
-        if (isMobileProject) {
-            await addMobileSpecificStyles(deployUrl);
+        if (isDevBuild) {
+            wm_styles_path = `${deployUrl}wm-styles.js`;
         } else {
-            if (isDevBuild) {
-                wm_styles_path = `${deployUrl}wm-styles.js`;
-            } else {
-                const fileName = 'wm-styles';
-                const hash = await generateHash(`${opPath}/${fileName}.css`);
-                copyCssFiles(hash, updatedFilenames);
-                const updatedFileName = `${fileName}.${hash}.css`
-                wm_styles_path = `${deployUrl}${updatedFileName}`;
-            }
+            const fileName = 'wm-styles';
+            const updatedFileName = `${fileName}.css`
+            wm_styles_path = `${deployUrl}${updatedFileName}`;
         }
 
         addScriptForWMStylesPath(wm_styles_path);
@@ -294,12 +200,12 @@ const generateSha1 = (content) => {
 
         //this is required to download all the assets
         $('head').append(`<meta name="deployUrl" content=${deployUrl} />`);
+        $('script[src$="services/application/wmProperties.js"]').remove();
+        $('link[href$="favicon.png"]').attr('href', `${deployUrl}favicon.png`);
 
         const htmlContent = $.html();
         await writeFile(`./dist/index.html`, htmlContent);
 
-        await generateHashForScripts(updatedFilenames);
-
         if (serviceWorkerEnabled) {
             // re-generate hash for index.html since its been modified
             updatedFileHashes['index.html'] = generateSha1(htmlContent);

package/angular-app/dependency-report.html

@@ -0,0 +1,124 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Angular Dependencies Report</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 20px;
+            color: #333;
+        }
+        .header {
+            background: #f4f4f4;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+        }
+        .section {
+            margin-bottom: 30px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        th {
+            background-color: #f8f8f8;
+            font-weight: bold;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .dependency-type {
+            font-size: 1.2em;
+            color: #666;
+            font-weight: bold;
+            margin: 20px 0 10px;
+            padding-bottom: 5px;
+            border-bottom: 2px solid #eee;
+        }
+        .transitive {
+            margin-left: 20px;
+            border-left: 3px solid #eee;
+            padding-left: 20px;
+        }
+        .license-count {
+            font-weight: bold;
+            color: #2196F3;
+        }
+        .timestamp {
+            color: #666;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Angular Project Dependencies Report</h1>
+        <p class="timestamp">Generated on: 8/13/2025, 11:05:42 AM</p>
+    </div>
+
+    <div class="section">
+        <h2>Project Dependencies Overview</h2>
+        
+        
+    </div>
+
+    <div class="section">
+        <h2>Transitive Dependencies</h2>
+        
+        <div class="dependency-type">Transitive Dependencies</div>
+        <table>
+            <tr>
+                <th>Package</th>
+                <th>Version</th>
+                <th>License</th>
+                <th>Repository</th>
+            </tr>
+            
+                    <tr>
+                        <td></td>
+                        <td>wavemaker/angular-app</td>
+                        <td>UNKNOWN</td>
+                        <td>N/A</td>
+                    </tr>
+                
+        </table>
+    
+    </div>
+
+    <div class="section">
+        <h2>License Summary</h2>
+        
+        <table>
+            <tr>
+                <th>License</th>
+                <th>Count</th>
+                <th>Packages</th>
+            </tr>
+            
+                    <tr>
+                        <td>UNKNOWN</td>
+                        <td class="license-count">1</td>
+                        <td></td>
+                    </tr>
+                
+        </table>
+    
+    </div>
+</body>
+</html>

package/angular-app/generate-dependency-report.js

@@ -0,0 +1,240 @@
+const checker = require('license-checker');
+const fs = require('fs');
+const path = require('path');
+
+// HTML template as a string
+const htmlTemplate = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Angular Dependencies Report</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 20px;
+            color: #333;
+        }
+        .header {
+            background: #f4f4f4;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+        }
+        .section {
+            margin-bottom: 30px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        th {
+            background-color: #f8f8f8;
+            font-weight: bold;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .dependency-type {
+            font-size: 1.2em;
+            color: #666;
+            font-weight: bold;
+            margin: 20px 0 10px;
+            padding-bottom: 5px;
+            border-bottom: 2px solid #eee;
+        }
+        .transitive {
+            margin-left: 20px;
+            border-left: 3px solid #eee;
+            padding-left: 20px;
+        }
+        .license-count {
+            font-weight: bold;
+            color: #2196F3;
+        }
+        .timestamp {
+            color: #666;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Angular Project Dependencies Report</h1>
+        <p class="timestamp">Generated on: {{GENERATED_DATE}}</p>
+    </div>
+
+    <div class="section">
+        <h2>Project Dependencies Overview</h2>
+        {{PRODUCTION_DEPENDENCIES}}
+        {{DEVELOPMENT_DEPENDENCIES}}
+    </div>
+
+    <div class="section">
+        <h2>Transitive Dependencies</h2>
+        {{TRANSITIVE_DEPENDENCIES}}
+    </div>
+
+    <div class="section">
+        <h2>License Summary</h2>
+        {{LICENSE_SUMMARY}}
+    </div>
+</body>
+</html>
+`;
+
+// Main function to generate the report
+function generateDependencyReport() {
+    checker.init({
+        start: './',
+        json: true,
+        customPath: {
+            licenses: true,
+            dependencies: true,
+            version: true
+        }
+    }, function(err, packages) {
+        if (err) {
+            console.error("Error:", err);
+            return;
+        }
+
+        const projectData = processPackages(packages);
+        const html = generateHTML(projectData);
+
+        // Write the report to a file
+        fs.writeFileSync('dependency-report.html', html);
+        console.log('Dependency report generated successfully!');
+    });
+}
+
+// Process the packages data
+function processPackages(packages) {
+    const data = {
+        production: {},
+        development: {},
+        transitive: {},
+        licenses: {}
+    };
+
+    // Read package.json to determine prod vs dev dependencies
+    const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+    const prodDeps = packageJson.dependencies || {};
+    const devDeps = packageJson.devDependencies || {};
+
+    Object.entries(packages).forEach(([pkgName, info]) => {
+        const name = pkgName.split('@')[0];
+        const version = pkgName.split('@')[1];
+        const packageInfo = {
+            version,
+            license: info.licenses,
+            description: info.description || '',
+            repository: info.repository || '',
+            publisher: info.publisher || ''
+        };
+
+        // Track license information
+        if (info.licenses) {
+            if (!data.licenses[info.licenses]) {
+                data.licenses[info.licenses] = {
+                    count: 0,
+                    packages: []
+                };
+            }
+            data.licenses[info.licenses].count++;
+            data.licenses[info.licenses].packages.push(name);
+        }
+
+        // Categorize dependencies
+        if (prodDeps[name]) {
+            data.production[name] = packageInfo;
+        } else if (devDeps[name]) {
+            data.development[name] = packageInfo;
+        } else {
+            data.transitive[name] = packageInfo;
+        }
+    });
+
+    return data;
+}
+
+// Generate HTML tables for dependencies
+function generateDependencyTable(dependencies, title) {
+    if (Object.keys(dependencies).length === 0) return '';
+
+    return `
+        <div class="dependency-type">${title}</div>
+        <table>
+            <tr>
+                <th>Package</th>
+                <th>Version</th>
+                <th>License</th>
+                <th>Repository</th>
+            </tr>
+            ${Object.entries(dependencies)
+        .map(([name, info]) => `
+                    <tr>
+                        <td>${name}</td>
+                        <td>${info.version}</td>
+                        <td>${info.license || 'Unknown'}</td>
+                        <td>${info.repository || 'N/A'}</td>
+                    </tr>
+                `).join('')}
+        </table>
+    `;
+}
+
+// Generate license summary table
+function generateLicenseSummary(licenses) {
+    return `
+        <table>
+            <tr>
+                <th>License</th>
+                <th>Count</th>
+                <th>Packages</th>
+            </tr>
+            ${Object.entries(licenses)
+        .map(([license, info]) => `
+                    <tr>
+                        <td>${license}</td>
+                        <td class="license-count">${info.count}</td>
+                        <td>${info.packages.join(', ')}</td>
+                    </tr>
+                `).join('')}
+        </table>
+    `;
+}
+
+// Generate the final HTML
+function generateHTML(data) {
+    let html = htmlTemplate;
+
+    // Replace placeholders with actual content
+    html = html.replace('{{GENERATED_DATE}}', new Date().toLocaleString());
+    html = html.replace('{{PRODUCTION_DEPENDENCIES}}',
+        generateDependencyTable(data.production, 'Production Dependencies'));
+    html = html.replace('{{DEVELOPMENT_DEPENDENCIES}}',
+        generateDependencyTable(data.development, 'Development Dependencies'));
+    html = html.replace('{{TRANSITIVE_DEPENDENCIES}}',
+        generateDependencyTable(data.transitive, 'Transitive Dependencies'));
+    html = html.replace('{{LICENSE_SUMMARY}}',
+        generateLicenseSummary(data.licenses));
+
+    return html;
+}
+
+// Run the report generation
+generateDependencyReport();