Merge pull request #13911 from IgniteUI/angular-ssr

test(ssr): extending the bundle-test project for SSR

Author: kdinev

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.5.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - name: Checkout
@@ -56,7 +56,7 @@ jobs:
         run: |
             npm run build:i18n
             npm run test:i18n:dist
-      - name: Bundle Tree-Shake Test
+      - name: Bundle Tree-Shake & SSR Test
         run: npm run build:bundletest
       - name: Publish to coveralls.io
         if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '18.x'

angular.json

@@ -270,6 +270,11 @@
               "includePaths": [
                 "node_modules"
               ]
+            },
+            "server": "projects/bundle-test/src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "projects/bundle-test/server.ts"
             }
           },
           "configurations": {

projects/bundle-test/server.ts

@@ -0,0 +1,56 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import bootstrap from './src/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 serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+
+  const commonEngine = new CommonEngine();
+
+  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();

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

@@ -3,7 +3,7 @@ import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(() => TestBed.configureTestingModule({
-    declarations: [AppComponent]
+    imports: [AppComponent]
   }));
 
   it('should create the app', () => {

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

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 import { ChipResourceStringsBG } from 'igniteui-angular-i18n';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [RouterOutlet]
 })
 export class AppComponent {
     protected chipStrings = ChipResourceStringsBG;

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

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

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

@@ -0,0 +1,9 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes), provideClientHydration()]
+};

projects/bundle-test/src/app/app.module.ts

@@ -1,17 +1,12 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { ChipComponent } from './chip/chip.component';
+import { ButtonGroupComponent } from './button-group/button-group.component';
 
-const routes: Routes = [
+export const routes: Routes = [
     { path: '', redirectTo: '/chip', pathMatch: 'full' },
     { path: 'chip', component: ChipComponent },
+    { path: 'button-group', component: ButtonGroupComponent}
     // { path: 'form', loadComponent: () => import('./form/form.component').then(m => m.FormComponent) },
     // { path: 'stepper', loadComponent: () => import('./stepper/stepper.component').then(m => m.StepperComponent) },
     // { path: 'grid', loadComponent: () => import('./grid/grid.component').then(m => m.GridComponent) }
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

…undle-test/src/app/app-routing.module.ts …ojects/bundle-test/src/app/app.routes.tsprojects/bundle-test/src/app/app-routing.module.ts renamed to projects/bundle-test/src/app/app.routes.ts projects/bundle-test/src/app/app-routing.module.ts renamed to projects/bundle-test/src/app/app.routes.ts

@@ -0,0 +1,5 @@
+<igx-buttongroup>
+    <button type="button" igxButton="flat">Button 1</button>
+    <button type="button" igxButton="flat">Button 2</button>
+    <button type="button" igxButton="flat">Button 3</button>
+</igx-buttongroup>