fix(ssr): fixing the ssr build

Author: kdinev

angular.json

@@ -399,7 +399,6 @@
               ]
             },
             "server": "projects/bundle-test/src/main.server.ts",
-            "prerender": true,
             "ssr": {
               "entry": "projects/bundle-test/server.ts"
             }

projects/bundle-test/server.ts

@@ -1,56 +1,66 @@
-import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr/node';
-import express from 'express';
-import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
+import {
+    AngularNodeAppEngine,
+    createNodeRequestHandler,
+    isMainModule,
+    writeResponseToNodeResponse,
+  } from '@angular/ssr/node';
+  import express from 'express';
+  import { dirname, resolve } from 'node:path';
+  import { fileURLToPath } from 'node:url';
 
-// 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 commonEngine = new CommonEngine();
+  const app = express();
+  const angularApp = new AngularNodeAppEngine();
 
-  server.set('view engine', 'html');
-  server.set('views', browserDistFolder);
+  /**
+   * Example Express Rest API endpoints can be defined here.
+   * Uncomment and define endpoints as necessary.
+   *
+   * Example:
+   * ```ts
+   * app.get('/api/**', (req, res) => {
+   *   // Handle API request
+   * });
+   * ```
+   */
 
-  // Example Express Rest API endpoints
-  // server.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(browserDistFolder, {
-    maxAge: '1y'
-  }));
+  /**
+   * Serve static files from /browser
+   */
+  app.use(
+    express.static(browserDistFolder, {
+      maxAge: '1y',
+      index: false,
+      redirect: false,
+    }),
+  );
 
-  // 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));
+  /**
+   * 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);
   });
 
-  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}`);
-  });
-}
+  /**
+   * 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;
+    app.listen(port, () => {
+      console.log(`Node Express server listening on http://localhost:${port}`);
+    });
+  }
 
-run();
+  /**
+   * The request handler used by the Angular CLI (dev-server and during build).
+   */
+  export const reqHandler = createNodeRequestHandler(app);

projects/bundle-test/src/app/app.config.server.ts

@@ -1,10 +1,13 @@
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
+import { provideServerRouting } from '@angular/ssr';
 import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering()
+    provideServerRendering(),
+    provideServerRouting(serverRoutes)
   ]
 };
 

projects/bundle-test/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

projects/bundle-test/src/app/form/form.component.ts

@@ -1,10 +1,23 @@
 import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { IGX_INPUT_GROUP_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IgxButtonDirective, IgxCheckboxComponent, IgxSwitchComponent } from 'igniteui-angular';
+import {
+    IGX_INPUT_GROUP_DIRECTIVES,
+    IGX_RADIO_GROUP_DIRECTIVES,
+    IgxButtonDirective,
+    IgxCheckboxComponent,
+    IgxSwitchComponent
+} from 'igniteui-angular';
 
 @Component({
     selector: 'app-form',
-    imports: [IgxCheckboxComponent, IgxSwitchComponent, IGX_RADIO_GROUP_DIRECTIVES, IgxButtonDirective, IGX_INPUT_GROUP_DIRECTIVES, ReactiveFormsModule],
+    imports: [
+        IgxCheckboxComponent,
+        IgxSwitchComponent,
+        IGX_RADIO_GROUP_DIRECTIVES,
+        IgxButtonDirective,
+        IGX_INPUT_GROUP_DIRECTIVES,
+        ReactiveFormsModule
+    ],
     templateUrl: './form.component.html',
     styleUrls: ['./form.component.scss']
 })

projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts

@@ -8,7 +8,6 @@ import {
     ViewChild,
     ElementRef,
     ChangeDetectorRef,
-    Renderer2,
     Optional,
     Self,
     booleanAttribute,
@@ -250,7 +249,6 @@ export class CheckboxBaseDirective implements AfterViewInit {
 
     constructor(
         protected cdr: ChangeDetectorRef,
-        protected renderer: Renderer2,
         @Inject(THEME_TOKEN)
         protected themeToken: ThemeToken,
         @Optional() @Self() public ngControl: NgControl
@@ -261,14 +259,14 @@ export class CheckboxBaseDirective implements AfterViewInit {
 
         this.theme = this.themeToken.theme;
 
-        const themeChange = this.themeToken.onChange((theme) => {
+        const { unsubscribe } = this.themeToken.onChange((theme) => {
             if (this.theme !== theme) {
                 this.theme = theme;
                 this.cdr.detectChanges();
             }
         });
 
-        this.destroyRef.onDestroy(() => themeChange.unsubscribe());
+        this.destroyRef.onDestroy(() => unsubscribe());
     }
 
     /**