Angular 8 and Nest.js

问题描述 投票:0回答:1

我一直在寻找一种简单的方法来将Nest.js添加到我的Angular 8项目中。但是,我还没有找到一种好的方法。我已经拉出了两个GitHub存储库并尝试运行它们,甚至那些都不起作用,我尝试访问建议的代理URL:localhost:4200 / api,localhost:3000或localhost:3000 / api或本地主机:4000 / api。我可以在最后一台计算机上得到一个可以正常工作的项目,但是圣诞节那天我买了一台新计算机,这是我第一次尝试再次与Nest.js和Angular一起工作,而我不知道这次到底出了什么问题。第一次非常乏味,但是我能够弄清楚,这一次我觉得我只是懒惰,但是我也认为还有很多更直接的方法可以解决这个问题。

任何帮助将不胜感激。

angular angular-universal nestjs-config
1个回答
0
投票

为了发现并轻松使用出色的二重奏Angula r + NestJS,我建议您使用Nx, An Extensible Dev Tools for Monorepos

Nx是一组工具,用于管理具有一组应用程序和您自己开发的库的monorepo。您可以混合使用不同的框架,例如Angular,React,NestJS,Web组件...

根据您的需要,它将为您提供一个包含一个Angular项目和一个NestJS项目的随时可用的环境。

为此,您可以遵循this excellent tutorial from 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

投放

此外,默认情况下,在Angular应用中的myrepo / apps / frontend中定义了一个proxy.conf.json文件:

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

这意味着从浏览器到http://localhost:4200/api的每个请求都将重定向到http://localhost:3333/api,因此由NestJS后端传递。

© www.soinside.com 2019 - 2024. All rights reserved.