angular 17 all dynamic routes loads very slow #28379
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
angular 17 all dynamic routes loads very slow when page is reloading from the browser or on opening it on new tab. tried adding all my dynamic routes in routes.txt before ng-build by a script but what if routes which i am getting from cms get updated or number of routes gets increase in the cms than i have to regenarate routes.txt and also there are 7-8k dynamic pages it is difficult to prerender them.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Everything is described above.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.3.5
Node: 18.20.2
Package Manager: npm 10.5.0
OS: darwin arm64
Angular: 17.3.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.14
@angular-devkit/build-angular 17.3.5
@angular-devkit/core 16.2.14
@angular-devkit/schematics 17.3.5
@angular/flex-layout 14.0.0-beta.41
@angular/ssr 17.3.6
@schematics/angular 17.3.5
rxjs 6.6.7
typescript 5.4.5
zone.js 0.14.4
Anything else?
my server.ts file
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { createWindow } from 'domino';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';
import { readFileSync } from 'fs';
var DomParser = require('dom-parser')
import 'localstorage-polyfill'
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');
const template = readFileSync(join(browserDistFolder, 'index.html')).toString();
const win = createWindow(template);
(global['window'] as Window) = win;
Object.defineProperty(win.document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true,
};
},
});
global['document'] = win.document;
global['DOMParser'] = DomParser
global['localStorage'] = localStorage;
const commonEngine = new CommonEngine({
enablePerformanceProfiler: false,
});
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('.', express.static(browserDistFolder, {
maxAge: '1y'
}));
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(Node Express server listening on http://localhost:${port});
});
}
run();