部署时缺少 Angular Material 组件

Question

我正在为我的 Web 开发课程构建一个带有 Angular 的 Web 应用程序。此应用程序使用角度材料库。今天，我尝试将我的 Angular 应用程序部署在我用 node js 从头开始​​构建的服务器上（我使用的是 http，以防万一）。我成功运行了ng build --prod，创建了一个 dist 文件夹，并部署了我的应用程序。

问题是，当我运行应用程序的部署版本时，角度材质组件不起作用。最好的解释方式是用图片。

这是应用在开发模式下运行时的外观：

这是应用在服务器上部署和运行时的样子：

所有材质组件都消失了/无法正确显示。为什么会这样？我必须做一些特别/重要的事情来将库/模块包含在我的应用程序的构建版本中吗？我在控制台中收到以下警告：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/styles.80f2d8e9e393f3581758.css".

非常感谢任何帮助！

Answer 1

假设您使用 dist 文件夹而不更改其内容，我很确定这是一个后端问题。

如果您的 ng 应用程序构建正确，则可以提供服务。

是您的 BE 出现问题或配置错误。在 google 上查看如何启动一个简单的 nodejs 服务器以将 dist 文件夹作为静态文件提供服务。 它应该工作。然后你必须解决你的后端问题，但这是一个单独的问题......

这个问题说明了如何做到这一点： Using node.js as a simple web server

Answer 2

我想通了！万一其他人犯了同样的错误，那是 Content-Type 响应标头的问题。我把它设置为“text/html”而不是“text/css”。