0

我一直在寻找一种直接的方式来将 NestJS 添加到我的 Angular 8 项目中。

但是，我还没有找到一个好的方法来做到这一点。

我已经提取了几个 GitHub 存储库并尝试运行这些存储库，甚至那些都不起作用，我试图访问推荐的代理 URL：localhost:4200/api、localhost:3000或localhost:3000/api、 或localhost:4000/api。

我能够在我的最后一台计算机上获得一个工作项目，但我在圣诞节得到了一台新计算机，这是我第一次尝试再次使用 NestJS 和 Angular，我不知道这次出了什么问题。

第一次非常乏味，但我能够弄清楚，这一次我觉得我只是懒惰，但我也认为有一个更直接的方法可以解决它。

任何帮助将非常感激。

4

3 回答 3

3

为了发现并轻松开始使用优秀的二人组Angula r + NestJS，我建议您使用Nx，一个可扩展的 Monorepos 开发工具。

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

根据您的需要，它将为您提供一个准备就绪的环境，其中包含一个 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后端传递。

于 2020-03-05T08:57:11.473 回答
1

您可以为您的巢后端设置端口。检查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
}
于 2020-03-05T15:48:55.097 回答
0

我们需要知道很多来帮助您。您是否尝试将其安装在常规计算机文件夹中？我不知道该怎么做。最好在您的计算机上设置一个 Vagrant 服务器，然后选择一个 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",

于 2020-03-05T16:19:01.063 回答