From 78dbb07cb88a02e7f134930589978238e269bbda Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Mon, 1 Sep 2025 11:51:04 +0300 Subject: [PATCH] templates builders updated to application builder --- templates/app/angular/angular.json | 20 ++++- templates/app/angular/package.json | 3 +- templates/app/angular/src/server.ts | 112 +++++++++++------------- templates/app/angular/tsconfig.app.json | 3 +- 4 files changed, 69 insertions(+), 69 deletions(-) diff --git a/templates/app/angular/angular.json b/templates/app/angular/angular.json index 31fa9c3f1c..7c7f32c604 100644 --- a/templates/app/angular/angular.json +++ b/templates/app/angular/angular.json @@ -24,11 +24,19 @@ "outputPath": "dist/MyProjectName/browser", "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["src/polyfills.ts"], + "polyfills": [ + "src/polyfills.ts" + ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "allowedCommonJsDependencies": ["chart.js", "js-sha256"], - "assets": ["src/favicon.ico", "src/assets"], + "allowedCommonJsDependencies": [ + "chart.js", + "js-sha256" + ], + "assets": [ + "src/favicon.ico", + "src/assets" + ], "styles": [ { "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", @@ -112,7 +120,11 @@ }, "src/styles.scss" ], - "scripts": [] + "scripts": [], + "outputMode": "server", + "ssr": { + "entry": "src/server.ts" + } }, "configurations": { "production": { diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index 9791e46fa1..28d866c48a 100644 --- a/templates/app/angular/package.json +++ b/templates/app/angular/package.json @@ -8,7 +8,8 @@ "build:prod": "ng build --configuration production", "watch": "ng build --watch --configuration development", "test": "ng test", - "lint": "ng lint" + "lint": "ng lint", + "serve:ssr:MyProjectName": "node dist/MyProjectName/browser/server/server.mjs" }, "private": true, "dependencies": { diff --git a/templates/app/angular/src/server.ts b/templates/app/angular/src/server.ts index d0a097c9bf..e6546c414d 100644 --- a/templates/app/angular/src/server.ts +++ b/templates/app/angular/src/server.ts @@ -1,66 +1,59 @@ -import 'zone.js/node'; - -import { APP_BASE_HREF } from '@angular/common'; -import { CommonEngine } from '@angular/ssr/node'; +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node'; import express from 'express'; -import { existsSync } from 'node:fs'; import { join } from 'node:path'; -import bootstrap from './main.server'; - -// The Express app is exported so that it can be used by serverless Functions. -export function app(): express.Express { - const server = express(); - const distFolder = join(process.cwd(), 'dist/MyProjectName/browser'); - const indexHtml = existsSync(join(distFolder, 'index.original.html')) - ? join(distFolder, 'index.original.html') - : join(distFolder, 'index.html'); - const commonEngine = new CommonEngine(); +const browserDistFolder = join(import.meta.dirname, '../browser'); - server.set('view engine', 'html'); - server.set('views', distFolder); +const app = express(); +const angularApp = new AngularNodeAppEngine(); - server.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => { - res.status(404).send('Not Found'); - }); +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * ```ts + * app.get('/api/{*splat}', (req, res) => { + * // Handle API request + * }); + * ``` + */ - // Example Express Rest API endpoints - // server.get('/api/{*splat}', (req, res) => { }); - // Serve static files from /browser - server.use(express.static(distFolder, { +/** + * Serve static files from /browser + */ +app.use( + express.static(browserDistFolder, { maxAge: '1y', index: false, - })); - - server.get('/.well-known/*', (req, res) => { - res.status(404).send('Not found'); - }); - - // All regular routes use the Angular engine - server.use((req, res, next) => { - const { protocol, originalUrl, baseUrl, headers } = req; + redirect: false, + }), +); - commonEngine - .render({ - bootstrap, - documentFilePath: indexHtml, - url: `${protocol}://${headers.host}${originalUrl}`, - publicPath: distFolder, - providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }], - }) - .then((html) => res.send(html)) - .catch((err) => next(err)); - }); - - return server; -} +/** + * Handle all other requests by rendering the Angular application. + */ +app.use((req, res, next) => { + angularApp + .handle(req) + .then((response) => + response ? writeResponseToNodeResponse(response, res) : next(), + ) + .catch(next); +}); -function run(): void { +/** + * Start the server if this module is the main entry point. + * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url)) { const port = process.env['PORT'] || 4000; - - // Start up the Node server - const server = app(); - server.listen(port, (error) => { + app.listen(port, (error) => { if (error) { throw error; } @@ -69,14 +62,7 @@ function run(): void { }); } -// Webpack will replace 'require' with '__webpack_require__' -// '__non_webpack_require__' is a proxy to Node 'require' -// The below code is to ensure that the server is run only when not requiring the bundle. -declare const __non_webpack_require__: NodeRequire; -const mainModule = __non_webpack_require__.main; -const moduleFilename = mainModule && mainModule.filename || ''; -if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { - run(); -} - -export default bootstrap; +/** + * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions. + */ +export const reqHandler = createNodeRequestHandler(app); diff --git a/templates/app/angular/tsconfig.app.json b/templates/app/angular/tsconfig.app.json index 82d91dc4a4..5b0b80483f 100644 --- a/templates/app/angular/tsconfig.app.json +++ b/templates/app/angular/tsconfig.app.json @@ -7,7 +7,8 @@ }, "files": [ "src/main.ts", - "src/polyfills.ts" + "src/polyfills.ts", + "src/server.ts" ], "include": [ "src/**/*.d.ts"