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的调用中在浏览器中呈现这些文件。由于后端服务器必须是唯一正在运行的服务器，而前端服务器不应该是服务器，而是简单的静态文件，需要使用前者的数据来提供这些文件。我希望我有道理。

Answer 1

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

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

然后，您的静态文件以及以角度创建的javascript文件也将在本地地址下投放

http://localhost:3000/

要让生成的角度javascript / html文件了解其位置（部署网址），请确保在 angular.json 中添加deployUrl键>文件

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

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

无法从节点

1 个答案: