Angular 8 and NestJS

Question

I've been looking all over for a straight-forward way to add NestJS to my Angular 8 project.

However, I haven't found a good way to do that.

I've pulled a couple of GitHub repositories and tried to run those, and even those didn't work, with me trying to access the recommended proxy URLs: localhost:4200/api, localhost:3000 or localhost:3000/api, or localhost:4000/api.

I was able to get a working project on my last computer but I got a new computer for Christmas and this is my first time trying to work with NestJS and Angular again, and I don't exactly know what's wrong this time.

The first time was very tedious, but I was able to figure it out, this time I think I'm just being lazy lol, but I also think there's just a much more straight forward way to go about it.

Any help would be much appreciated.

Hi, please for your next post, use markdown syntax to make your post more clear and readable. I already update your text in this way. — Thierry Falvo, Mar 05 '20 at 08:39

score 3 · Answer 1 · answered Mar 05 '20 at 08:57

To discover and start easily with the excellent duo Angular + NestJS, I recommend you to use Nx, An Extensible Dev Tools for Monorepos.

Nx is a set of tools to manage a monorepo with a collection of applications, and your own developed libraries. You can mix different frameworks as Angular, React, NestJS, Web components...

For your needs, it will provide you a ready-to-start environment with one Angular project and one NestJS project.

To do that, you can follow this excellent tutorial from Nx.dev.

Main steps are:

Create a new Nx workspace (called "myrepo" here)

npx create-nx-workspace@latest myrepo
cd myrepo

Create a Angular application (called "frontend" here)

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

Create a NestJS application (called "api" here)

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

Serve theses applications (in 2 separate shell)

ng serve api
ng serve frontend

Then as tutorial described it, you can use HttpClient to interact with your NestJS application.

By default: - Angular will be served at http://localhost:4200 - NestJS will be served at http://localhost:3333

Also by default, a proxy.conf.json file is defined inside Angular app at `myrepo/apps/frontend' :

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

which means that every request from browser to http://localhost:4200/api will be redirected to http://localhost:3333/api, hence delivered by NestJS backend.

score 1 · Answer 2 · answered Mar 05 '20 at 15:48

You can set the port for your nest backend. Check src/main.ts file. You could find this line in bootstrap function.

await app.listen(3000);

And if you want to use global prefix for the api endpoint, just add below code:

app.setGlobalPrefix('/api');

So it would looks like this:

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

And you set proxy or interceptor from your Angular application. For proxy:

{
    "/api": "http://localhost:3000/",
    "secure": false
}

score 0 · Answer 3 · answered Mar 05 '20 at 16:19

There is a lot we need to know to help you. Are you trying to install it in a regular computer folder? I'm not sure how to do that. It is best to setup a Vagrant server on your computer and select an Ubuntu server to live inside that. So running "vagrant up" will bring up this server. Inside of that install Nestjs and then start it. In Ubuntu you want it installed in the /home/vagrant/nestjs6.

Use a different folder for each Nestjs version. This could save you when it comes time to upgrade. If you decide to use Vagrant you don't need your files in the Vagrant box. It can mirror them from your authoring folder on your computer.

Put this code in a file called proxy.conf.json and in the same directory as your Angular package.json.

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

In the scripts section of your package.json:

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

Angular 8 and NestJS

3 Answers3

Create a new Nx workspace (called "myrepo" here)

Create a Angular application (called "frontend" here)

Create a NestJS application (called "api" here)

Serve theses applications (in 2 separate shell)