Angular SSR场景下如何托管静态文件？求简洁实现方案及示例

默认托管（无需额外配置） #

Angular Universal（SSR方案）默认会将src/assets目录下的静态文件打包到dist/[你的项目名]/browser/assets路径。启动SSR服务后，直接通过/assets/[文件名]即可访问，例如：

/assets/images/bg.jpg

自定义静态目录配置 #

1. 通过Angular配置文件扩展 #

如果需要新增静态目录，修改angular.json的build.options.assets数组，添加自定义目录路径：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets",
            "src/static-files" // 新增自定义静态目录
          ]
        }
      }
    }
  }
}

执行打包命令ng build && ng run your-project-name:server后，src/static-files下的文件会被同步到dist/[你的项目名]/browser/static-files，访问路径为/static-files/[文件名]。

2. 通过Express服务器自定义托管（灵活场景） #

如果需要从非打包目录托管静态文件（比如项目根目录下的public文件夹），修改server.ts（SSR的Express入口文件）：

import { join } from 'path';
import * as express from 'express';
import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';

const app = express();
const PORT = process.env.PORT || 4000;
const distFolder = join(process.cwd(), 'dist/your-project-name/browser');

// 新增：托管外部静态目录
app.use('/public', express.static(join(process.cwd(), 'public'), {
  maxAge: '1y' // 可选：设置长期缓存策略
}));

// 原有的SSR静态文件托管（处理打包后的browser目录下的静态资源）
app.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));

// 剩下的SSR渲染逻辑
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));

app.set('view engine', 'html');
app.set('views', distFolder);

app.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

配置完成后，public目录下的文件可通过/public/[文件名]访问，例如/public/downloads/guide.pdf。

注意事项 #

• 自定义打包目录需确保在angular.json中配置，否则打包时不会被同步到产物目录。
• 外部静态目录需在部署时和SSR服务一起部署，避免文件缺失导致404。

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