chore: update

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: taiga-family/ci/actions/setup/[email protected]
       - run: npm run lint
       - run: npm run prettier -- --check
-      - run: npx nx build-gh-pages demo
+      - run: npx nx build demo
 
 concurrency:
   group: ci-${{ github.workflow }}-${{ github.ref }}

.github/workflows/deploy.yml

@@ -11,11 +11,11 @@ jobs:
       - uses: taiga-family/ci/actions/setup/[email protected]
       - uses: taiga-family/ci/actions/setup/[email protected]
       - uses: taiga-family/ci/actions/setup/[email protected]
-      - run: npx nx build-gh-pages demo
+      - run: npx nx build demo
       - uses: taiga-family/ci/actions/deploy/[email protected]
         with:
           token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }}
-          folder: dist/demo
+          folder: dist/demo/browser
 
 concurrency:
   group: deploy-${{ github.head_ref }}

apps/demo/project.json

@@ -5,14 +5,14 @@
     "sourceRoot": "apps/demo/src",
     "targets": {
         "build": {
-            "executor": "@angular-devkit/build-angular:browser",
+            "executor": "@angular-devkit/build-angular:application",
             "options": {
                 "outputPath": "dist/demo",
                 "index": "apps/demo/src/index.html",
-                "main": "apps/demo/src/main.ts",
-                "polyfills": "apps/demo/src/polyfills.ts",
+                "browser": "apps/demo/src/main.ts",
+                "polyfills": ["zone.js", "apps/demo/src/polyfills.ts"],
                 "tsConfig": "apps/demo/tsconfig.app.json",
-                "baseHref": "/",
+                "baseHref": "./",
                 "assets": [
                     "apps/demo/src/favicon.ico",
                     "apps/demo/src/assets",
@@ -24,78 +24,38 @@
                 ],
                 "styles": ["apps/demo/src/styles.less", "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less"],
                 "scripts": [],
-                "extractLicenses": false,
-                "buildOptimizer": false,
-                "sourceMap": true,
-                "optimization": false
+                "server": "apps/demo/src/main.server.ts",
+                "prerender": {
+                    "discoverRoutes": false,
+                    "routesFile": "apps/demo/src/routes.txt"
+                },
+                "ssr": {
+                    "entry": "apps/demo/server.ts"
+                }
             },
             "configurations": {
                 "production": {
-                    "baseHref": "./",
-                    "fileReplacements": [
-                        {
-                            "replace": "apps/demo/src/environments/environment.ts",
-                            "with": "apps/demo/src/environments/environment.prod.ts"
-                        }
-                    ],
-                    "optimization": true,
-                    "outputHashing": "media",
-                    "sourceMap": false,
-                    "namedChunks": false,
-                    "extractLicenses": true,
-                    "vendorChunk": false,
-                    "buildOptimizer": true
+                    "outputHashing": "all"
+                },
+                "development": {
+                    "optimization": false,
+                    "extractLicenses": false,
+                    "sourceMap": true
                 }
             },
-            "defaultConfiguration": ""
+            "defaultConfiguration": "production"
         },
         "serve": {
             "executor": "@angular-devkit/build-angular:dev-server",
-            "options": {
-                "buildTarget": "demo:build"
-            },
             "configurations": {
                 "production": {
+                    "buildTarget": "demo:build:production"
+                },
+                "development": {
                     "buildTarget": "demo:build:development"
                 }
-            }
-        },
-        "build-gh-pages": {
-            "executor": "nx:run-commands",
-            "options": {
-                "parallel": false,
-                "commands": [
-                    "npx nx prerender demo",
-                    "cp dist/demo/index.html dist/demo/404.html",
-                    "rm -rf dist/demo-server dist/demo/index.original.html"
-                ]
-            }
-        },
-        "prerender": {
-            "executor": "@nguniversal/builders:prerender",
-            "options": {
-                "buildTarget": "demo:build:production",
-                "serverTarget": "demo:server:production",
-                "guessRoutes": false,
-                "routes": ["/"]
-            }
-        },
-        "server": {
-            "executor": "@angular-devkit/build-angular:server",
-            "options": {
-                "outputPath": "dist/demo-server",
-                "main": "apps/demo/server.ts",
-                "tsConfig": "apps/demo/tsconfig.server.json"
             },
-            "configurations": {
-                "production": {
-                    "outputHashing": "media",
-                    "sourceMap": false,
-                    "buildOptimizer": true,
-                    "vendorChunk": false
-                }
-            },
-            "defaultConfiguration": "production"
+            "defaultConfiguration": "development"
         }
     }
 }

apps/demo/server.ts

@@ -1,50 +1,53 @@
-import 'zone.js/node';
-
-import {existsSync} from 'node:fs';
-import {join} from 'node:path';
+import {dirname, join, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 import {APP_BASE_HREF} from '@angular/common';
-import {ngExpressEngine} from '@nguniversal/express-engine';
+import {CommonEngine} from '@angular/ssr';
+import {provideLocation, provideUserAgent} from '@ng-web-apis/universal';
 import express from 'express';
 
 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 distFolder = join(process.cwd(), `dist/demo`);
-    const indexHtml = existsSync(join(distFolder, `index.original.html`))
-        ? `index.original.html`
-        : `index`;
+    const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+    const browserDistFolder = resolve(serverDistFolder, `../browser`);
+    const indexHtml = join(serverDistFolder, `index.server.html`);
 
-    // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
-    server.engine(
-        `html`,
-        ngExpressEngine({
-            bootstrap,
-        }),
-    );
+    const commonEngine = new CommonEngine();
 
     server.set(`view engine`, `html`);
-    server.set(`views`, distFolder);
+    server.set(`views`, browserDistFolder);
 
     // Example Express Rest API endpoints
     // server.get('/api/**', (req, res) => { });
-
     // Serve static files from /browser
     server.get(
         `*.*`,
-        express.static(distFolder, {
+        express.static(browserDistFolder, {
             maxAge: `1y`,
         }),
     );
 
-    // All regular routes use the Universal engine
-    server.get(`*`, (req, res) => {
-        res.render(indexHtml, {
-            req,
-            providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}],
-        });
+    // 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},
+                    provideLocation(req),
+                    provideUserAgent(req),
+                ],
+            })
+            .then(html => res.send(html))
+            .catch(err => next(err));
     });
 
     return server;
@@ -61,19 +64,4 @@ 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.
-// eslint-disable-next-line @typescript-eslint/naming-convention
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__?.main;
-const moduleFilename = mainModule?.filename ?? ``;
-
-if (moduleFilename === __filename || moduleFilename.includes(`iisnode`)) {
-    run();
-}
-
-export * from './src/main.server';
-
-// fixes prerendering
-export default bootstrap;
+run();

apps/demo/src/app/app.config.server.ts

@@ -1,18 +1,11 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
 import {ApplicationConfig, mergeApplicationConfig} from '@angular/core';
 import {provideServerRendering} from '@angular/platform-server';
+import {UNIVERSAL_PROVIDERS} from '@ng-web-apis/universal';
 
 import {appConfig} from './app.config';
 
 const serverConfig: ApplicationConfig = {
-    providers: [provideServerRendering()],
+    providers: [provideServerRendering(), UNIVERSAL_PROVIDERS],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

apps/demo/src/app/app.config.ts

@@ -1,4 +1,5 @@
 import {ApplicationConfig, importProvidersFrom} from '@angular/core';
+import {provideClientHydration} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {provideRouter} from '@angular/router';
 import {TuiDialogModule, TuiRootModule} from '@taiga-ui/core';
@@ -17,5 +18,6 @@ export const appConfig: ApplicationConfig = {
             TuiDialogModule,
             TuiPushModule,
         ),
+        provideClientHydration(),
     ],
 };

apps/demo/src/polyfills.ts

@@ -1 +1 @@
-import 'zone.js'; // Included with Angular CLI.
+import '@ng-web-apis/universal/mocks';

apps/demo/src/routes.txt

@@ -0,0 +1 @@
+/

apps/demo/tsconfig.app.json

@@ -1,10 +1,12 @@
 {
     "extends": "../../tsconfig.json",
+    "angularCompilerOptions": {
+        "compilationMode": "full"
+    },
     "compilerOptions": {
-        "removeComments": true,
-        "baseUrl": ".",
-        "outDir": "../../dist/out-tsc",
-        "types": []
+        "outDir": "./out-tsc/app",
+        "types": ["node"]
     },
-    "files": ["src/main.ts", "src/polyfills.ts"]
+    "files": ["src/main.ts", "src/polyfills.ts", "src/main.server.ts", "server.ts"],
+    "include": ["src/**/*.d.ts"]
 }