在 NodeJS 中运行 Angular 9 应用程序的问题答案

【问题标题】：Problems running an Angular 9 app in NodeJS在 NodeJS 中运行 Angular 9 应用程序的问题
【发布时间】：2020-06-24 11:45:55
【问题描述】：

我有一个可用的 NodeJS 服务器和一个 Angular 9 应用程序。我能够在开发模式下测试应用程序，它运行良好。

但是，当我使用 ng build --prod 构建应用程序并尝试使用 NodeJS 服务器访问它时，我收到了几个关于文件加载的错误：

拒绝应用样式来自 'http://localhost:8080/styles.09cf2cc3740ba29d305c.css' 因为它 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且已启用严格的 MIME 检查。

获取http://localhost:8080/runtime.689ba4fd6cadb82c1ac2.js net::ERR_ABORTED 404（未找到）

我在应用中有一个代理文件，可以将所有请求重定向到 NodeJS：

proxy.conf.json

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

我错过了什么吗？

【问题讨论】：

请您提供更多信息：您将 NodeJS 用于后端 API 或仅用于提供静态内容（您的 Angular 应用程序），或两者兼而有之？
我想我不得不说两个。我有用于网络查询的端点，但我必须为静态文件添加一些代码，例如：app.use(express.static(config.paths.webs));。我想放代码，但它就像很多。

标签： node.js angular angular-cli-v9

【解决方案1】：

proxy.conf.json旨在通过在开发环境中重写url，使用ng serve，为您提供访问backend的简便方法。

例如，通过访问http://localhost:4200/api，实际上您访问的是http://localhost:3000/api。（所以你的后端）。

但在这里，您的问题是如何使用 NodeJS 提供 Angular 文件。

这是一个最小的express 代码，它服务于API 端点/api，以及public 子目录中的静态文件。

const express = require('express')
const app = express()

app.use(express.static('public'));

app.get('/api', function (req, res) {
  res.send({ message: 'api ok' })
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

将ng build --prod生成的所有文件（见dist文件夹和your-app-name子文件夹内部）复制到public文件夹。

node app.js

您将能够通过http://localhost:3000 访问您的Angular 应用程序，您的Angular 应用程序将能够通过http://localhost:3000/api 访问您的API。

【讨论】：