无法从节点呈现 Angular 构建的静态 html

Question

我想从我的节点服务器渲染 Angular 的静态文件。

作为一个实验，以下是我采取的步骤：

通过使用构建我的 Angular 项目创建了一个 dist 文件夹

ng build --prod

复制dist文件夹到我的节点服务器根目录

在我的节点服务器中配置 express 应用程序以指向 dist 文件夹的 index.html。以下是我编写的配置代码片段 -

app.use(express.static(path.join(__dirname, '../front-end/dist/')))

app.get('*', (req, res) => {
 return res.sendFile(path.join(__dirname, '../front-end/dist/my-first-app/index.html'))
})

当我在端口 3000 上本地运行我的节点服务器时，如果我是正确的，它应该被重定向到编译的角度 dist 文件夹中的 index.html 页面。好吧，我看到节点正在尝试重定向。但是，重定向后，浏览器无法在 index.html 文件中加载 html。它在控制台上抛出以下错误-

Uncaught SyntaxError: Unexpected token <

上述错误清楚地表明浏览器未能加载html页面。我相信我的理解是正确的。但我无法弄清楚为什么会记录此错误。我希望我能在这里得到一些答案。

我正在尝试在没有 Angular CLI 的 ng serve 命令的情况下工作。如果我成功了，我会尝试在云上尝试这个。我的意图是我只想使用从 Angular 构建生成的静态文件，而不是使用 ng serve 加载它们，并且还想通过使用 node.js 的调用在浏览器上呈现这些文件。由于后端服务器必须是唯一运行的服务器，而前端不应该是服务器，而是简单的静态文件，需要使用来自前者的数据来提供服务。我希望我说得通。

Answer 1

尝试使用路径直接提供静态文件，例如/ 并在端口上运行应用程序

app.use('/', express.static('pathToAngular/'));
app.listen(3000);

然后你的静态文件，还有 angular 创建的 javascript 文件将在本地地址下提供

http://localhost:3000/

要让 Angular 生成的 javascript/html 文件知道它们的位置（部署 url），请确保在 angular.json 文件中添加 deployUrl 键

"configurations": {
  "production": {
    "optimization": true,
    [...]
    "deployUrl": "http://localhost:3000/",
    "baseHref": "./"
  }
}

不要忘记末尾的斜线，还要添加 baseHref 条目。通常，您需要使用 nodejs 本地部署 url 创建另一个配置，并将生产服务器 url 添加到 production 配置中。