首页 > 解决方案 > 提供静态文件会引发 404 错误 Angular SSR

问题描述

在此处输入图像描述

上面的截图显示了我部署的 Angular ssr 项目的目录结构。IE dist/browser, server 和 server.js

我正在使用 pm2 并使角度 SSR 作为节点应用程序运行,如教程中所述。

我已经使用 apache 代理从 apache 运行这个节点应用程序。

一切正常。实际上 index.html 也按照教程中的描述提供服务,当我点击服务器时,它会呈现 html。

当它提供诸如 css、js、图像之类的静态内容时,就会出现问题。它抛出 404 错误。附上截图

在此处输入图像描述

可以看出 34.xxx/abc 实际上是节点应用运行的代理路径。它还为 index.html 提供服务。但是js、css文件会抛出404错误。

下面是我的 server.ts 的快照

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
// app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
app.use(express.static(__dirname + '/dist/browser'));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  //res.render('index', { req });
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

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

其中 DIST_FOLDER 是 join(process.cwd(), 'dist')

理想情况下,它将静态内容显示为 localhost:4000/styles.x.css 等。

我到底错过了什么?帮助表示赞赏

标签: angularexpressangular-universal

解决方案


推荐阅读