时间戳

首页 > 解决方案 > 由 Node.js 提供的 Angular 应用，无需 JS 脚本

node.js - 由 Node.js 提供的 Angular 应用，无需 JS 脚本

问题描述

我用 node.js 服务器创建了一个 Angular 应用程序。当我在本地提供应用程序（'ng serve'）时，应用程序运行良好。但是，当我将 Angular 项目构建到“公共”文件夹中，并将 node.js 服务器设置为为应用程序的网页提供服务时，浏览器会将服务器提供的 HTML 代码显示为文本。

为页面提供服务的 node.js 代码如下：

const express = require('express')
const app = express()
const server = require('http').createServer(app)
const bodyParser = require('body-parser')
const cors = require('cors')
const path = require('path')
const fs = require('fs')

const authRouter = require('./src/middlewares/auth.js');
const roomRouter = require('./src/middlewares/room.js');
const controller = require('./src/middlewares/token.js');

const PORT = process.env.PORT || 8080;

///////////////////////////////////////
//////////// MIDDLEWARES //////////////
///////////////////////////////////////

app.use(bodyParser.json()) //Parsed data is populated on the request object (i.e. req.body).
app.use(bodyParser.urlencoded( { extended: true }))
app.use( (req, res, next ) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Requested-With, Accept, x-access-token')
  if (req.method == 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH')
  }
  res.header('Content-Type', 'application/json') //REST-API: we only send back json data
  next()
})

app.use(express.static(path.join(__dirname, 'public')));


//////////////////////////////
///////// DATABASE ///////////
//////////////////////////////
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017/sync';
var db;
MongoClient.connect(url, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(client => {
    console.log("connection to database established...  ");

    db = client.db("sync");
    db.createCollection('users'); //Normally, if it already exists, it shoudn't do anything, but I'm not sure

    app.use((req, res, next) => {
      req.db = db
      next();
    })

  })
  .catch(err => {console.log(err)})

///////////////////
//// ROUTING //////
///////////////////

app.use('/api/auth', authRouter)
app.use('/api/room', roomRouter)

app.get('*', (req, res) => {
   // res.setHeader('Content-Type', 'text/html')
   res.sendFile(path.join(__dirname, 'public', 'index.html'));
   // res.send('Hello')
});


///////////////////////////////////////
///////// SOCKET CONNECTION ///////////
///////////////////////////////////////

var sockets = [];

const io = require('socket.io').listen(server);

io.on('connection', (socket) => {
    //socket.on...
    //...
});


///////////////////////////////////////
///////// SERVER CONNECTION ///////////
///////////////////////////////////////

app.listen(PORT, () => {
  console.log("Running on port " + PORT)
})

index.html 文件如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client2</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="runtime-es2015.js" type="module"></script>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="polyfills-es2015.js" type="module"></script>
  <script src="styles-es2015.js" type="module"></script>
  <script src="styles-es5.js" nomodule defer></script>
  <script src="vendor-es2015.js" type="module"></script>
  <script src="vendor-es5.js" nomodule defer></script>
  <script src="main-es2015.js" type="module"></script>
  <script src="main-es5.js" nomodule defer></script>
</body>
</html>

当我检查服务器提供的网页时，只发送 index.html 而不是链接到它的脚本，因此无法正确显示页面。就好像 express 不提供 javascript 文件一样。

标签： node.jsangular

解决方案

res.sendFile()是一个发送文件的快速函数（https://expressjs.com/de/api.html#res.sendFile）。因此，标题将相应设置。使用 express 函数res.send()正确设置响应并查看http://expressjs.com/en/starter/basic-routing.html。

更好的是：使用像 nginx 这样的简单 http-server 或 npm 工具 http-server 来实现您的服务目的。

推荐阅读