Маршрутизация Nodejs не указывает на все внутренние маршруты приложения Angular - PullRequest
Новая
       15

Маршрутизация Nodejs не указывает на все внутренние маршруты приложения Angular

0 голосов
/ 03 мая 2020

Я создаю приложение внешнего интерфейса на Angular 9. Для обслуживания приложения я использую сервер NodeJs, чтобы принимать все запросы и указывать их на файлы Dist (Build), генерируемые Angular.

Постановка проблемы

Все маршруты, полученные сервером Node, должны быть перенаправлены в файлы приложения Angular.

Проблема, с которой я сталкиваюсь

Когда я пытаюсь использовать какой-либо внутренний маршрут от сервера Node, он возвращает ответ 404. Но страница работает, когда я запускаю Angular в режиме разработки.

Например, localhost:4200/innerPage (Angular Dev Server) работает, но localhost:8000/innerPage (Node Server) не работает.

Страница Angular отображается при посещении localhost:8000 хоть. Только внутренние маршруты для Angular не работают на сервере.

NodeJS код 

const app = express();


app.use("/", express.static(__dirname + "../../dist/TournamentsPlatform/"));

app.listen(8000, () => console.log("Server started on port 8000"));

То, что я пробовал ранее

app.get("/", function (req, res) { res.sendFile(path.join(__dirname + "/../dist/TournamentsPlatform/")); });

app.use("/*", express.static(__dirname + "../../dist/TournamentsPlatform/"));

app.use(express.static(__dirname + "../../dist/TournamentsPlatform/"));

Ошибка - консоль браузера показывает

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Mis c Info

  • Я использую Ленивую загрузку для всех Angular маршрутов. Каждая страница представляет собой новый модуль
  • Страница работает нормально, когда я внутренне маршрутизирую ее. Итак, когда я go до localhost:8000/ (NodeJS Server) и затем нажимаю на ссылку, которая указывает на внутренний маршрут, он работает нормально. И в то время, URL-адрес браузера localhost:8000/innerPage

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Попробуйте это: 

// fulfill the array with extensions that are part of what an angular
// app must need during load like: .js, .png, .jpg, .woff, .json etc
const allowedExtensions = ['.js'];

app.get('*', (req, res, next) => {
  if (allowedExtensions.some(ext => req.url.includes(ext))) {
    // remove the forward slash at the end of the path 
    const url = req.url.replace(/\/$/,'');
    res.sendFile(path.join(__dirname, 'dist', 'TournamentsPlatform', url));
  } else {
    res.sendFile(path.join(__dirname, 'dist', 'TournamentsPlatform', 'index.html'));
  }
});

Кстати, это не будет работать, если только первый запрос явно не введет index.html в путь (например, http://localhost/index.html), потому что express не будет знать файл по умолчанию для обслуживания: 

app.get('*', 
  express.static(path.join(__dirname, 'dist', 'TournamentsPlatform'));
0 голосов
/ 03 мая 2020

Удаление этой строки из приложения. js работает

app.use(express.static(__dirname + "../../dist/TournamentsPlatform/"));

...