在 NodeJS 中運行 Angular 9 應用程序的問題

Question

我有一個可用的 NodeJS 服務器和一個 Angular 9 應用程序。 我能夠在開發模式下測試該應用程序，它運行良好。

但是，當我使用ng build --prod構建應用程序並嘗試使用ng build --prod服務器訪問它時，我收到了幾個關於文件加載的錯誤：

拒絕應用來自“ http://localhost:8080/styles.09cf2cc3740ba29d305c.css ”的樣式，因為它的 MIME 類型（“text/html”）不是受支持的樣式表 MIME 類型，並且啟用了嚴格的 MIME 檢查。

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

我在應用程序中有一個代理文件，可以將其所有請求重定向到 NodeJS：

代理配置文件

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

我錯過了什么嗎？

Answer 1

proxy.conf.json旨在通過使用ng serve重寫開發環境中的 url，為您提供一種訪問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。