From 622e8ad839b1994f24cd14a5966b13c35c320b69 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 10 Jul 2025 15:53:37 +0300 Subject: [PATCH 1/6] fix(*): grid/** route to prerender instead of client --- src/app/app.routes.server.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app.routes.server.ts b/src/app/app.routes.server.ts index c941fd2449..92eb7ff973 100644 --- a/src/app/app.routes.server.ts +++ b/src/app/app.routes.server.ts @@ -99,7 +99,7 @@ export const serverRoutes: ServerRoute[] = [ }, { path: 'grid/**', - renderMode: RenderMode.Client // TODO: Fails with Prerender + renderMode: RenderMode.Prerender // TODO: Fails with Prerender }, { path: 'samples/grid/**', From 33bf70b94dff91345c6516e1a5f1b3347083dbdb Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 10 Jul 2025 16:40:54 +0300 Subject: [PATCH 2/6] Fix app-lob ssr build --- gulpfile.js | 60 ----------- package.json | 2 +- projects/app-lob/src/app/app.routes.server.ts | 10 +- projects/app-lob/src/app/metadata.js | 101 ------------------ 4 files changed, 10 insertions(+), 163 deletions(-) delete mode 100644 projects/app-lob/src/app/metadata.js diff --git a/gulpfile.js b/gulpfile.js index c91f022430..ba4d4357f7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -63,66 +63,6 @@ gulp.task("overwrite-package-json", (done) => { done(); }); -const createPrependerdLobStructure = (cb) => { - const folders = [ - './dist/app-lob/samples', - './dist/app-lob/samples/grid', - './dist/app-lob/samples/tree-grid', - './dist/app-lob/samples/grid-finjs-dock-manager', - './dist/app-lob/samples/hierarchical-grid', - './dist/app-lob/grid', - './dist/app-lob/tree-grid', - './dist/app-lob/grid-finjs-dock-manager', - './dist/app-lob/hierarchical-grid' - ]; - folders.forEach(dir => { - if (!fs.existsSync(dir)) { - fs.mkdirSync(dir); - } - }); - cb(); -} - -const addPrerenderedLobPages = (cb) => { - const { metadata } = require('./projects/app-lob/src/app/metadata'); - const indexFilePath = path.resolve(__dirname, './', 'dist/app-lob/browser', 'index.html'); - - // read in the index.html file - fs.readFile(indexFilePath, 'utf8', function (err, data) { - if (err) { - return console.error(err); - } - - metadata.forEach(({ url, title, description, og_url, folder }) => { - let result = data; - result = result.replace(/\$OG_TITLE/g, title); - result = result.replace(/\$OG_DESCRIPTION/g, description); - result = result.replace(/\$OG_URL/g, og_url); - - let filename = url.substring(1).replace(/\//g, '-'); - if (filename.length) { - filename = filename + '.html'; - } else { - filename = 'index.html'; - } - - fs.writeFile(path.resolve(__dirname, './', './dist/app-lob/samples/' + folder, filename), result, (err) => { - if (err) { - console.log(err); - } - }); - fs.writeFile(path.resolve(__dirname, './', './dist/app-lob/' + folder, filename), result, (err) => { - if (err) { - console.log(err); - } - }); - }) - }) - cb(); -} - -exports.prerenderPages = gulp.series(createPrependerdLobStructure, addPrerenderedLobPages); - gulp.task("watch-live-editing", gulp.series("generate-live-editing", () => { gulp.watch(["./src/**/*.*", "!./src/assets/**", "./live-editing/**/*.*", "package.json"], function () { Object.keys(require.cache).forEach(function (key) { diff --git a/package.json b/package.json index 5053a08d95..3c7b55674c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "watch-live-editing": "gulp watch-live-editing", "sass-js-compile-check": "gulp sass-js-compile-check", "build": "gulp generate-live-editing && gulp overwrite-package-json && ng build --configuration production", - "build:app-lob": "gulp generate-live-editing --appDv=true && gulp overwrite-package-json && ng build app-lob --configuration production && gulp prerenderPages", + "build:app-lob": "gulp generate-live-editing --appDv=true && gulp overwrite-package-json && ng build app-lob --configuration production", "build:app-crm": "gulp generate-live-editing --appCrm=true && gulp overwrite-package-json && ng build app-crm --configuration production", "test": "ng test", "lint": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng lint", diff --git a/projects/app-lob/src/app/app.routes.server.ts b/projects/app-lob/src/app/app.routes.server.ts index ce62ea928b..a0979f29ce 100644 --- a/projects/app-lob/src/app/app.routes.server.ts +++ b/projects/app-lob/src/app/app.routes.server.ts @@ -1,6 +1,14 @@ import { RenderMode, ServerRoute } from '@angular/ssr'; export const serverRoutes: ServerRoute[] = [ + { + path: 'home', + renderMode: RenderMode.Prerender + }, + { + path: 'grid/grid-master-detail', + renderMode: RenderMode.Prerender + }, { path: 'treegrid-finjs', renderMode: RenderMode.Client // TODO: Fails with Prerender @@ -19,6 +27,6 @@ export const serverRoutes: ServerRoute[] = [ }, { path: '**', - renderMode: RenderMode.Prerender + renderMode: RenderMode.Client } ]; diff --git a/projects/app-lob/src/app/metadata.js b/projects/app-lob/src/app/metadata.js deleted file mode 100644 index 0c688805e2..0000000000 --- a/projects/app-lob/src/app/metadata.js +++ /dev/null @@ -1,101 +0,0 @@ -const Routes = { - Landing: '/', - GridFinjs: '/grid-finjs', - TreeGridFinjs: '/treegrid-finjs', - TreeGridChilddatakey: '/treegrid-childdatakey', - TreeGridPrimaryforeignkey: '/treegrid-primaryforeignkey', - BostonMarathon: '/grid', - MasterDetail: '/grid-master-detail', - FinJsDockManagerGrid: '/grid-finjs-dock-manager', - HierarchicalGrid: '/hierarchical-grid-resizing', -} - -const defaultTitle = 'Data Grids built with Ignite UI for Angular'; -const defaultDescription = 'Data Grids built with Ignite UI for Angular Description'; -const defaultOgUrl = 'https://www.infragistics.com'; - -const metadata = [ - { - url: Routes.Landing, - title: defaultTitle, - description: defaultDescription, - og_url: defaultOgUrl, - folder: '' - }, - { - url: Routes.GridFinjs, - title: 'Real-Time Financial Analysis Data Grid built with Ignite UI for Angular', - description: 'Real-Time Financial Analysis Data Grid built with Ignite UI for Angular', - og_url: 'https://www.infragistics.com/angular-demos-lob/grid-finjs', - folder: '' - }, - { - url: Routes.TreeGridFinjs, - title: 'Angular Tree Grid Example built with Ignite UI for Angular', - description: 'Angular Tree Grid Example built with Ignite UI for Angular', - og_url: 'https://www.infragistics.com/angular-demos-lob/treegrid-finjs', - folder: '' - }, - { - url: Routes.TreeGridChilddatakey, - title: 'Build Better Modern Web Experiences, Faster with Angular Components', - description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.', - og_url: 'https://www.infragistics.com/angular-demos-lob/tree-grid/treegrid-childdatakey', - folder: 'tree-grid' - }, - { - url: Routes.TreeGridPrimaryforeignkey, - title: 'Build Better Modern Web Experiences, Faster with Angular Components', - description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.', - og_url: 'https://www.infragistics.com/angular-demos-lob/tree-grid/treegrid-primaryforeignkey', - folder: 'tree-grid' - }, - { - url: Routes.BostonMarathon, - title: 'Boston Marathon 2023 – Angular Data Grid Example', - description: 'Boston Marathon 2023 – Angular Data Grid Example', - og_url: 'https://www.infragistics.com/angular-demos-lob/grid/grid', - folder: 'grid' - }, - { - url: Routes.MasterDetail, - title: 'Angular Grid Master-Detail Example built with Ignite UI for Angular', - description: 'Angular Grid Master-Detail Example built with Ignite UI for Angular', - og_url: 'https://www.infragistics.com/angular-demos-lob/grid/grid-master-detail', - folder: 'grid' - }, - { - url: Routes.FinJsDockManagerGrid, - title: 'Build Better Modern Web Experiences, Faster with Angular Components', - description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.', - og_url: 'https://www.infragistics.com/angular-demos-lob/grid-finjs-dock-manager/grid-finjs-dock-manager', - folder: 'grid-finjs-dock-manager' - }, - { - url: Routes.HierarchicalGrid, - title: 'Build Better Modern Web Experiences, Faster with Angular Components', - description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.', - og_url: 'https://www.infragistics.com/angular-demos-lob/hierarchical-grid/hierarchical-grid-resizing', - folder: 'hierarchical-grid' - } -]; - -const get = (route) => { - const data = metadata.find(({ url }) => url === route); - if (data) { - return data; - } else { - return { - url: route, - title: defaultTitle, - description: defaultDescription, - og_url: defaultOgUrl - } - } -} - -module.exports = { - metadata, - Routes, - get, -}; From a4d42923da339f76b273ef1ed86e125c5851a44b Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 14 Jul 2025 15:05:31 +0300 Subject: [PATCH 3/6] Add ssr to all projects --- angular.json | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/angular.json b/angular.json index 51b1925fb3..db2949094d 100644 --- a/angular.json +++ b/angular.json @@ -39,7 +39,12 @@ "node_modules" ] }, - "browser": "src/main.ts" + "browser": "src/main.ts", + "server": "src/main.server.ts", + "outputMode": "static", + "ssr": { + "entry": "src/server.ts" + } }, "configurations": { "production": { @@ -159,7 +164,12 @@ ] }, "preserveSymlinks": true, - "browser": "projects/app-lob/src/main.ts" + "browser": "projects/app-lob/src/main.ts", + "server": "projects/app-lob/src/main.server.ts", + "outputMode": "static", + "ssr": { + "entry": "projects/app-lob/src/server.ts" + } }, "configurations": { "production": { @@ -284,7 +294,12 @@ "node_modules" ] }, - "browser": "projects/app-crm/src/main.ts" + "browser": "projects/app-crm/src/main.ts", + "server": "projects/app-crm/src/main.server.ts", + "outputMode": "static", + "ssr": { + "entry": "projects/app-crm/src/server.ts" + } }, "configurations": { "production": { From deb4a3cedc475ddb183229bfff10dbc356925645 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 14 Jul 2025 15:05:39 +0300 Subject: [PATCH 4/6] make grid samples prerender --- src/app/app.routes.server.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app.routes.server.ts b/src/app/app.routes.server.ts index a643b9c285..92eb7ff973 100644 --- a/src/app/app.routes.server.ts +++ b/src/app/app.routes.server.ts @@ -103,7 +103,7 @@ export const serverRoutes: ServerRoute[] = [ }, { path: 'samples/grid/**', - renderMode: RenderMode.Client // TODO: Fails with Prerender + renderMode: RenderMode.Prerender // TODO: Fails with Prerender }, { path: '**', From 880d91500436f1fef503407354f7e149baea2736 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 14 Jul 2025 16:25:35 +0300 Subject: [PATCH 5/6] Revert changes --- src/app/app.routes.server.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/app.routes.server.ts b/src/app/app.routes.server.ts index 92eb7ff973..716f7494a3 100644 --- a/src/app/app.routes.server.ts +++ b/src/app/app.routes.server.ts @@ -99,11 +99,11 @@ export const serverRoutes: ServerRoute[] = [ }, { path: 'grid/**', - renderMode: RenderMode.Prerender // TODO: Fails with Prerender + renderMode: RenderMode.Client // TODO: Fails with Prerender }, { path: 'samples/grid/**', - renderMode: RenderMode.Prerender // TODO: Fails with Prerender + renderMode: RenderMode.Client // TODO: Fails with Prerender }, { path: '**', From 08b65e00c1a0581d3f30abc5448242d637585076 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 14 Jul 2025 18:11:10 +0300 Subject: [PATCH 6/6] Revert app lob route changes --- projects/app-lob/src/app/app.routes.server.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/projects/app-lob/src/app/app.routes.server.ts b/projects/app-lob/src/app/app.routes.server.ts index a0979f29ce..17a211d670 100644 --- a/projects/app-lob/src/app/app.routes.server.ts +++ b/projects/app-lob/src/app/app.routes.server.ts @@ -1,14 +1,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr'; export const serverRoutes: ServerRoute[] = [ - { - path: 'home', - renderMode: RenderMode.Prerender - }, - { - path: 'grid/grid-master-detail', - renderMode: RenderMode.Prerender - }, { path: 'treegrid-finjs', renderMode: RenderMode.Client // TODO: Fails with Prerender @@ -18,15 +10,15 @@ export const serverRoutes: ServerRoute[] = [ renderMode: RenderMode.Client // TODO: Fails with Prerender }, { - path: 'grid-finjs-dock-manager', + path: 'grid-finjs-dock-manager/**', renderMode: RenderMode.Client // TODO: Fails with Prerender }, { - path: 'samples/grid-finjs-dock-manager', + path: 'samples/grid-finjs-dock-manager/**', renderMode: RenderMode.Client // TODO: Fails with Prerender }, { path: '**', - renderMode: RenderMode.Client + renderMode: RenderMode.Prerender } ];