SAP Composable Storefront 2211 SSR启动求助：Angular 17升级后原方法失效

1. 升级SSR相关依赖 #

执行命令更新适配Angular 17的SSR包：

npm install @angular/ssr @nguniversal/builders@latest --save-dev

2. 重构server.ts入口文件 #

Angular 17对SSR入口逻辑做了调整，替换原有server.ts为以下结构（根据项目路径微调）：

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';

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);

  // 静态资源托管
  server.get('*.*', express.static(browserDistFolder, { maxAge: '1y' }));

  // Angular路由处理
  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;
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

run();

同时确保src/main.server.ts的导出格式正确：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config.server';

export default function bootstrap() {
  return bootstrapApplication(AppComponent, appConfig);
}

3. 更新angular.json配置 #

修改architect下的server和serve-ssr配置，替换为Angular 17的SSR构建器：

"server": {
  "builder": "@angular/ssr:server",
  "options": {
    "outputPath": "dist/your-project-name/server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "outputHashing": "media"
    }
  }
},
"serve-ssr": {
  "builder": "@angular/ssr:serve",
  "configurations": {
    "development": {
      "browserTarget": "your-project-name:build:development",
      "serverTarget": "your-project-name:server:development"
    },
    "production": {
      "browserTarget": "your-project-name:build:production",
      "serverTarget": "your-project-name:server:production"
    }
  }
}

注意将your-project-name替换为实际项目名称。

4. 启动与验证 #

• 开发环境：直接执行启动命令

ng serve --ssr

• 生产环境：先构建再启动

ng build --ssr
node dist/your-project-name/server/server.mjs

内容的提问来源于stack exchange，提问作者Vitalii Fedoryshyn