Merge pull request #2007 from valor-software/alex-migrate-to-ssr

feat(ssr): migrated demo to ssr

Author: lexasq

apps/ng2-charts-demo/e2e/ng2-charts.spec.ts-snapshots/app-financial-chart-1-chromium-win32.png

@@ -17,6 +17,9 @@ const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
  */
 export default defineConfig({
   ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  expect: {
+    toHaveScreenshot: { maxDiffPixels: 100 },
+  },
   projects: [
     {
       name: 'chromium',

apps/ng2-charts-demo/playwright.config.ts

@@ -24,6 +24,11 @@
         "loader": {
           ".html": "text",
           ".ts": "text"
+        },
+        "server": "apps/ng2-charts-demo/src/main.server.ts",
+        "prerender": true,
+        "ssr": {
+          "entry": "apps/ng2-charts-demo/server.ts"
         }
       },
       "configurations": {
@@ -102,6 +107,72 @@
           "updateSnapshots": true
         }
       }
+    },
+
+    "server": {
+      "executor": "@angular-devkit/build-angular:server",
+      "options": {
+        "outputPath": "dist/ng2-charts-demo/server",
+        "main": "apps/ng2-charts-demo/server.ts",
+        "tsConfig": "apps/ng2-charts-demo/tsconfig.server.json"
+      },
+      "configurations": {
+        "production": {
+          "buildOptimizer": true,
+          "outputHashing": "media",
+          "fileReplacements": [
+            {
+              "replace": "apps/ng2-charts-demo/src/environments/environment.ts",
+              "with": "apps/ng2-charts-demo/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "sourceMap": false,
+          "extractLicenses": true,
+          "vendorChunk": false
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "sourceMap": true,
+          "extractLicenses": false,
+          "vendorChunk": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+
+    "serve-ssr": {
+      "executor": "@angular-devkit/build-angular:ssr-dev-server",
+      "configurations": {
+        "development": {
+          "browserTarget": "ng2-charts-demo:build:development",
+          "serverTarget": "ng2-charts-demo:server:development"
+        },
+        "production": {
+          "browserTarget": "ng2-charts-demo:build:production",
+          "serverTarget": "ng2-charts-demo:server:production"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+
+    "prerender": {
+      "executor": "@angular-devkit/build-angular:prerender",
+      "options": {
+        "routes": ["/"]
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "ng2-charts-demo:build:production",
+          "serverTarget": "ng2-charts-demo:server:production"
+        },
+        "development": {
+          "browserTarget": "ng2-charts-demo:build:development",
+          "serverTarget": "ng2-charts-demo:server:development"
+        }
+      },
+      "defaultConfiguration": "production"
     }
   },
   "implicitDependencies": ["ng2-charts"]

apps/ng2-charts-demo/project.json

@@ -0,0 +1,60 @@
+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';
+
+// 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',
+      index: 'index.html',
+    }),
+  );
+
+  // 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: any) => res.send(html))
+      .catch((err: any) => 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();

apps/ng2-charts-demo/server.ts

@@ -0,0 +1,9 @@
+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);

apps/ng2-charts-demo/src/app/app.config.server.ts

@@ -30,6 +30,7 @@ import { ScatterChartComponent } from './scatter-chart/scatter-chart.component';
 import { DynamicChartComponent } from './dynamic-chart/dynamic-chart.component';
 import { FinancialChartComponent } from './financial-chart/financial-chart.component';
 import { LandingComponent } from './landing/landing.component';
+import { provideClientHydration } from '@angular/platform-browser';
 
 const routes: Route[] = [
   {
@@ -114,5 +115,6 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withInterceptorsFromDi()),
     provideAnimations(),
     provideRouter(routes),
+    provideClientHydration(),
   ],
 };

apps/ng2-charts-demo/src/app/app.config.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

apps/ng2-charts-demo/src/main.server.ts

@@ -4,7 +4,7 @@
     "outDir": "../../dist/out-tsc",
     "types": ["node"]
   },
-  "files": ["src/main.ts"],
+  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
   "include": ["src/**/*.d.ts"],
   "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }

apps/ng2-charts-demo/tsconfig.app.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/server",
+    "types": ["node"]
+  },
+  "files": ["src/main.server.ts", "server.ts"]
+}

apps/ng2-charts-demo/tsconfig.server.json

@@ -3,10 +3,10 @@
   "name": "ng2-charts",
   "description": "Reactive, responsive, beautiful charts for Angular based on Chart.js",
   "peerDependencies": {
-    "@angular/platform-browser": ">=18.0.0",
-    "@angular/common": ">=18.0.0",
-    "@angular/core": ">=18.0.0",
-    "@angular/cdk": ">=18.0.0",
+    "@angular/platform-browser": ">=19.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/cdk": ">=19.0.0",
     "chart.js": "^3.4.0 || ^4.0.0",
     "rxjs": "^6.5.3 || ^7.4.0"
   },