Около двух месяцев назад я написал статью о том, как использовать Express в качестве бэкэнда и как обслуживать приложение angular с помощью express. Это было до того, как я открыл для себя nestjs.

Что такое гнездо, будет ваш следующий вопрос!

Nest - это платформа для создания эффективных масштабируемых серверных приложений Node.js. Он использует современный JavaScript, построен на TypeScript (сохраняет совместимость с чистым JavaScript) и сочетает в себе элементы ООП (объектно-ориентированное программирование), FP (функциональное программирование) и FRP (функциональное реактивное программирование).

Это то, что вы читаете на главной странице, если перейдете на nestjs.com. Что это значит?
Некоторые из вас, возможно, имеют опыт работы с Java, с Spring-framework, который предлагает вам много черной магии, внедрения зависимостей и т. д.. Это одновременно
Ваша среда может быть одной из микросервисов, nest предлагает ее поддержку.
Но самое главное, она предлагает структуру приложения, очень похожую на angular. Он работает с машинописным текстом, что дает вам много преимуществ, когда вы работаете в команде.

И, конечно же, вы хотите интегрировать свое угловое приложение в свое приложение-гнездо, развернуть его на одном сервере в облаке и надеяться, что оно будет работать так, как вы хотите.

Разделите свои маршруты

Я предпочитаю добавлять свои маршруты в отдельный файл, его легко поддерживать. Также полезно иметь префикс, и он необходим, если вы хотите следовать этому руководству. Создайте файл routes.ts.

Создайте свои пути в контроллере

Два пути определены: корневой путь и наш путь api / test. Корневой путь загружает файл в ответ, содержащий логику angular. Другой путь просто возвращает строку.

В корневом пути можно найти ответ @Res (). Это тот же ответ, что и вам известен экспресс-ответ. Это можно использовать, чтобы преобразовать реакцию на что-то еще, чтобы контролировать ее сами. В этом случае в ответ будет загружен html файл.

В пути testApi @Res () ответ не вводится. Если вы сделаете это здесь, ответ будет продолжать загружаться, если вы попытаетесь получить доступ к вводу.

Думаешь, все будет работать…?

Мы пытаемся получить доступ к конечной точке api / test…

Мы пытаемся получить доступ к конечной точке localhost: 3001, надеясь, что это сработает ...

Мы могли бы добавить промежуточное ПО!

Промежуточное ПО - это функция, которая вызывается перед обработчиком маршрутизатора. Таким образом, он будет обработан, прежде чем пытаться получить доступ к нашему контроллеру, чтобы проверить, существует ли наш маршрут. Как показано на изображении ниже, клиентская сторона запрашивает маршрут → промежуточное ПО перехватывает это и что-то с ним делает. Тогда он идет по правильному маршруту.

Это означает, что мы можем использовать это для решения нашей проблемы. Все вызовы должны проходить через промежуточное программное обеспечение внешнего интерфейса, если оно начинается с / api, оно должно выполняться обычным образом. В противном случае необходимо загрузить файл в наш маршрут и вернуть его в маршрут.

Создайте файл frontend.middleware.ts и добавьте следующий код. Отрегулируйте allowedExt по своему усмотрению.

Зарегистрируйте промежуточное ПО

После того, как вы создали этот файл, он еще не зарегистрирован. Промежуточное ПО внешнего интерфейса необходимо зарегистрировать в AppModule. Он прописан для всех маршрутов и всех методов запроса.

Попробуйте перейти на http: // localhost: 3001

Рабочее приложение можно найти на: