refactor(@angular/ssr): remove express engine

alan-agius4 · alan-agius4 · commit c30e3692b3b4 · 2023-08-30T09:53:57.000+02:00
This removes the util function for express, instead the "CommonEngine" is called directly infuture before this package is final we might rename the "CommonEngine" to something else.
diff --git a/packages/angular/ssr/public_api.ts b/packages/angular/ssr/public_api.ts
@@ -7,8 +7,3 @@
  */
 
 export { CommonEngine, CommonEngineRenderOptions } from './src/common-engine';
-export {
-  ngExpressEngine,
-  NgExpressEngineOptions,
-  NgExpressEngineRenderOptions,
-} from './src/express-engine';
diff --git a/packages/angular/ssr/schematics/ng-add/files/server.ts.template b/packages/angular/ssr/schematics/ng-add/files/server.ts.template
@@ -1,7 +1,7 @@
 import 'zone.js/node';
 
 import { APP_BASE_HREF } from '@angular/common';
-import { ngExpressEngine } from '@angular/ssr';
+import { CommonEngine } from '@angular/ssr';
 import * as express from 'express';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
@@ -11,12 +11,11 @@ import <% if (isStandalone) { %>bootstrap<% } else { %>{ AppServerModule }<% } %
 export function app(): express.Express {
   const server = express();
   const distFolder = join(process.cwd(), '<%= browserDistDirectory %>');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
 
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    <% if (isStandalone) { %>bootstrap<% } else { %>bootstrap: AppServerModule<% } %>
-  }));
+  const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
   server.set('views', distFolder);
@@ -28,12 +27,18 @@ export function app(): express.Express {
     maxAge: '1y'
   }));
 
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render(indexHtml, {
-      url: req.originalUrl,
-      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
-    });
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    commonEngine
+      .render({
+        <% if (isStandalone) { %>bootstrap<% } else { %>bootstrap: AppServerModule<% } %>,
+        documentFilePath: indexHtml,
+        url: req.originalUrl,
+        publicPath: distFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
   });
 
   return server;
diff --git a/packages/angular/ssr/schematics/ng-add/index_spec.ts b/packages/angular/ssr/schematics/ng-add/index_spec.ts
@@ -111,9 +111,8 @@ describe('Universal Schematic', () => {
       const filePath = '/projects/test-app/server.ts';
       const content = tree.readContent(filePath);
       expect(tags.oneLine`${content}`).toContain(tags.oneLine`
-      ngExpressEngine({
-        bootstrap: AppServerModule
-      }));
+      .render({
+        bootstrap: AppServerModule,
     `);
     });
   });
@@ -150,9 +149,8 @@ describe('Universal Schematic', () => {
       const filePath = '/projects/test-app/server.ts';
       const content = tree.readContent(filePath);
       expect(tags.oneLine`${content}`).toContain(tags.oneLine`
-        ngExpressEngine({
-          bootstrap
-        }));
+        .render({
+          bootstrap,
       `);
     });
   });
diff --git a/packages/angular/ssr/src/express-engine.ts b/packages/angular/ssr/src/express-engine.ts
diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/proxy_spec.ts b/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/proxy_spec.ts
@@ -26,18 +26,16 @@ describe('Serve SSR Builder', () => {
       'src/main.server.ts': `
         import 'zone.js/node';
 
-        import { ngExpressEngine } from '@angular/ssr';
+        import { CommonEngine } from '@angular/ssr';
         import * as express from 'express';
-        import { resolve } from 'node:path';
+        import { resolve, join } from 'node:path';
         import { AppServerModule } from './app/app.module.server';
 
         export function app(): express.Express {
           const server = express();
           const distFolder = resolve(__dirname, '../dist');
-
-          server.engine('html', ngExpressEngine({
-            bootstrap: AppServerModule
-          }));
+          const indexHtml = join(distFolder, 'index.html');
+          const commonEngine = new CommonEngine();
 
           server.set('view engine', 'html');
           server.set('views', distFolder);
@@ -46,10 +44,16 @@ describe('Serve SSR Builder', () => {
             maxAge: '1y'
           }));
 
-          server.get('*', (req, res) => {
-            res.render('index', {
-              url: req.originalUrl,
-            });
+          server.get('*', (req, res, next) => {
+            commonEngine
+              .render({
+                bootstrap: AppServerModule,
+                documentFilePath: indexHtml,
+                url: req.originalUrl,
+                publicPath: distFolder,
+              })
+              .then((html) => res.send(html))
+              .catch((err) => next(err));
           });
 
           return server;
diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/ssl_spec.ts b/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/ssl_spec.ts
@@ -26,18 +26,16 @@ describe('Serve SSR Builder', () => {
       'src/main.server.ts': `
         import 'zone.js/node';
 
-        import { ngExpressEngine } from '@angular/ssr';
+        import { CommonEngine } from '@angular/ssr';
         import * as express from 'express';
-        import { resolve } from 'node:path';
+        import { resolve, join } from 'node:path';
         import { AppServerModule } from './app/app.module.server';
 
         export function app(): express.Express {
           const server = express();
           const distFolder = resolve(__dirname, '../dist');
-
-          server.engine('html', ngExpressEngine({
-            bootstrap: AppServerModule
-          }));
+          const indexHtml = join(distFolder, 'index.html');
+          const commonEngine = new CommonEngine();
 
           server.set('view engine', 'html');
           server.set('views', distFolder);
@@ -46,10 +44,16 @@ describe('Serve SSR Builder', () => {
             maxAge: '1y'
           }));
 
-          server.get('*', (req, res) => {
-            res.render('index', {
-              url: req.originalUrl,
-            });
+          server.get('*', (req, res, next) => {
+            commonEngine
+              .render({
+                bootstrap: AppServerModule,
+                documentFilePath: indexHtml,
+                url: req.originalUrl,
+                publicPath: distFolder,
+              })
+              .then((html) => res.send(html))
+              .catch((err) => next(err));
           });
 
           return server;
diff --git a/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/works_spec.ts b/packages/angular_devkit/build_angular/src/builders/ssr-dev-server/specs/works_spec.ts
@@ -23,40 +23,44 @@ describe('Serve SSR Builder', () => {
 
     host.writeMultipleFiles({
       'src/main.server.ts': `
-        import 'zone.js/node';
-
-        import { ngExpressEngine } from '@angular/ssr';
-        import * as express from 'express';
-        import { resolve } from 'node:path';
-        import { AppServerModule } from './app/app.module.server';
-
-        export function app(): express.Express {
-          const server = express();
-          const distFolder = resolve(__dirname, '../dist');
-
-          server.engine('html', ngExpressEngine({
-            bootstrap: AppServerModule
-          }));
-
-          server.set('view engine', 'html');
-          server.set('views', distFolder);
-
-          server.get('*.*', express.static(distFolder, {
-            maxAge: '1y'
-          }));
-
-          server.get('*', (req, res) => {
-            res.render('index', {
+      import 'zone.js/node';
+
+      import { CommonEngine } from '@angular/ssr';
+      import * as express from 'express';
+      import { resolve, join } from 'node:path';
+      import { AppServerModule } from './app/app.module.server';
+
+      export function app(): express.Express {
+        const server = express();
+        const distFolder = resolve(__dirname, '../dist');
+        const indexHtml = join(distFolder, 'index.html');
+        const commonEngine = new CommonEngine();
+
+        server.set('view engine', 'html');
+        server.set('views', distFolder);
+
+        server.get('*.*', express.static(distFolder, {
+          maxAge: '1y'
+        }));
+
+        server.get('*', (req, res, next) => {
+          commonEngine
+            .render({
+              bootstrap: AppServerModule,
+              documentFilePath: indexHtml,
               url: req.originalUrl,
-            });
-          });
+              publicPath: distFolder,
+            })
+            .then((html) => res.send(html))
+            .catch((err) => next(err));
+        });
 
-          return server;
-        }
+        return server;
+      }
 
-        app().listen(process.env['PORT']);
+      app().listen(process.env['PORT']);
 
-        export * from './app/app.module.server';
+      export * from './app/app.module.server';
       `,
     });
   });
