templates builders updated to application builder

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": {

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": {

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);

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"