Угловое приложение, обслуживаемое Node.js без JS-скриптов

ProgramBox

Угловое приложение, обслуживаемое Node.js без JS-скриптов

Post author:admin
Запись опубликована:24 марта, 2023
Post category:Вопросы по программированию

#node.js #angular

Вопрос:

Я создал угловое приложение с node.js сервер. Когда я обслуживаю приложение локально (‘ng serve’), приложение работает нормально. Однако, когда я создаю проект Angular в «общедоступную» папку и устанавливаю node.js сервер для обслуживания веб-страниц приложения браузер отображает HTML-код, обслуживаемый сервером, в виде текста.

The 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)
})

The 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.

1. Не могли бы вы поделиться всем файлом *.js?

2. Выполнено. Тем не менее, я все еще работаю с локальной базой данных. Я не знаю, повлияет ли это как-либо на обслуживание веб-страниц.

Ответ №1:

res.sendFile() это экспресс-функция для отправки файла (https://expressjs.com/de/api.html#res.sendFile). Итак, заголовки будут установлены соответствующим образом. Используйте функцию express res.send() , чтобы правильно задать ответ и посмотреть наhttp://expressjs.com/en/starter/basic-routing.html.

Еще лучше: используйте простой http-сервер, такой как nginx, или http-сервер npm tool для своих целей.

1. Я думаю, что проблема не в функции ‘sendFile’. Даже когда я меняю его на ‘res.send (‘Привет’)’, код index.html файл, расположенный в общей папке, по-прежнему отправляется и отображается в виде текста. Я подозреваю, что есть проблема со строкой ‘express.static’.

2. Пожалуйста, взгляните на вторую часть моего ответа. Почему бы не использовать выделенный http-сервер? Зависит ли ваш проект от сервера самостоятельной сборки?

3. На данный момент я использую бесплатную учетную запись Heroku для размещения своего веб-сайта. Heroku не предоставляет статический IP-адрес для сервера, и я не знаю, как настроить nginx без использования ssh. Возможно ли использовать nginx с Heroku?

4. @AchrafElKhamsi к сожалению, я не могу помочь вам с этим, поскольку у меня нет более глубокого опыта работы с heroku. Пожалуйста, обратитесь к документам в качестве первого шага.