Angular 8 и NestJS

Question

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

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

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

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

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

Любая помощь приветствуется.

Answer 1

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

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

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

Для этого вы можете следовать этому отличному руководству от 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

Создайте приложение NestJS (здесь называется "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 - NestJS будет обслуживаться в http://localhost:3333

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

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

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

Answer 2

Вы можете установить порт для своего внутреннего сервера. Проверьте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
}

Answer 3

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

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

Поместите этот код в файл с именем proxy.conf.json и в тот же каталог, что и ваш Angular package.json.

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

В разделе сценариев вашего package.json:

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