Angular 8 и NestJS - PullRequest
Новая
       12

Angular 8 и NestJS

0 голосов
/ 04 марта 2020

Я искал простой способ добавить Nest JS в мой проект Angular 8.

Однако я не нашел хорошего способа сделать это.

Я вытащил пару репозиториев GitHub и попытался запустить те, и даже те, которые не работали, пытаясь получить доступ к рекомендуемым URL прокси: localhost:4200/api, localhost:3000 или localhost:3000/api или localhost:4000/api.

Мне удалось получить рабочий проект на моем последнем компьютере, но я получил новый компьютер на Рождество, и я впервые пытаюсь снова работать с Nest JS и Angular, и я не Точно знаю, что не так в этот раз.

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

Любая помощь будет высоко ценится.

Ответы [ 3 ]

1 голос
/ 05 марта 2020

Вы можете установить порт для своего внутреннего гнезда. Проверьте src/main.ts файл. Вы можете найти эту строку в функции bootstrap. 

await app.listen(3000);

И если вы хотите использовать глобальный префикс для конечной точки API, просто добавьте следующий код: 

app.setGlobalPrefix('/api');

Так что это будет выглядит так: 

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.setGlobalPrefix('/api');
    ...
    await app.listen(3000);
}

И вы устанавливаете прокси или перехватчик из вашего приложения Angular. Для прокси: 

{
    "/api": "http://localhost:3000/",
    "secure": false
}
1 голос
/ 05 марта 2020

Чтобы легко узнать и начать с отличного дуэта Angula r + Гнездо JS, я рекомендую вам использовать Nx, расширяемый инструмент разработки для Monorepos .

Nx - это набор инструментов для управления monorepo с помощью набора приложений и собственных разработанных библиотек. Вы можете смешивать различные фреймворки, такие как Angular, React, Nest JS, веб-компоненты ...

Для ваших нужд, он предоставит вам готовую к запуску среду с одним Angular проектом и один проект Nest JS.

Для этого вы можете следовать этому превосходному учебнику от Nx.dev .

Основные шаги:

Создайте новое рабочее пространство Nx (здесь оно называется «myrepo») 

npx create-nx-workspace@latest myrepo
cd myrepo

Создайте приложение Angular (здесь оно называется «внешний интерфейс») 

ng add @nrwl/angular # Add Angular Capabilities to the workspace
ng g @nrwl/angular:application frontend # Create an Angular Application

Создайте приложение Nest JS (здесь он называется «api») 

ng add @nrwl/nest # Add Node Capabilities to the workspace
ng g @nrwl/nest:application api --frontend-project frontend

Служить этим приложениям (в 2 отдельных оболочках) 

ng serve api
ng serve frontend

Затем, как описано в руководстве, вы можете использовать HttpClient для взаимодействия с вашим NestJS приложение.

По умолчанию: - Angular будет обслуживаться в http://localhost:4200 - Гнездо JS будет обслуживаться в http://localhost:3333

Также по умолчанию файл proxy.conf.json определен внутри Angular app в myrepo / apps / frontend: 

{
  "/api": {
    "target": "http://localhost:3333",
    "secure": false
  }
}

, что означает, что каждый запрос от браузера на http://localhost:4200/api будет перенаправляться на http://localhost:3333/api, следовательно, доставляется NestJS backend.

0 голосов
/ 05 марта 2020

Нам нужно многое знать, чтобы помочь вам. Вы пытаетесь установить его в обычную папку на компьютере? Я не уверен, как это сделать. Лучше всего настроить сервер Vagrant на своем компьютере и выбрать сервер Ubuntu, чтобы жить внутри него. Таким образом, запуск "vagrant up" вызовет этот сервер. Внутри этой инсталляции Nest js и запустите ее. В Ubuntu вы хотите, чтобы он был установлен в /home/vagrant/nestjs6.

Используйте разные папки для каждой версии Nest js. Это может спасти вас, когда придет время для обновления. Если вы решили использовать Vagrant, вам не нужны ваши файлы в окне Vagrant. Он может отражать их из вашей папки разработки на вашем компьютере.

Поместите этот код в файл с именем proxy.conf. json и в тот же каталог, в котором находится пакет Angular. json. 

{
  "/api/*": {
    "target": "http://127.0.0.1:3000",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

В разделе скриптов вашего пакета. json:

"start": "ng serve --proxy-config proxy.conf.json",

...