Проблемы с запуском приложения Angular 9 в NodeJS

Question

У меня есть рабочий сервер 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
  }
}

Я что-то пропустил?

Answer 1

proxy.conf.json стремится предоставить вам простой способ доступа к backend переписав URL-адрес в среде разработки, используя ng serve.

Например, открыв http://localhost:4200/api, фактически, вы получаете доступ http://localhost:3000/api. (так что ваш бэкэнд).

Но здесь проблема в том, как обслуживать файлы Angular с помощью NodeJS.

Вот минимальный 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

Вы сможете получить доступ к своему приложению Angular по адресу http://localhost:3000, и ваше приложение Angular сможет получить доступ к вашему API по адресу http://localhost:3000/api.