Configure a proxy for your API calls with Angular CLI

By: Juri Strumpflohner

53   4   15044

Uploaded on 11/07/2016

During development, you often end up in the situation where you have your backend API server running at one address (i.e. localhost:3000) while your frontend development server runs on another (i.e. localhost:4200).

In this video we will learn how to configure your Angular CLI setup to get the best development experience, by proxying your API calls to the correct backend server.

Comments (4):

By anonymous    2018-03-26

just adding the actual url in case the serach results changes https://www.youtube.com/watch?v=OjmZPPKaj6A

Original Thread

By anonymous    2017-09-20

NEW ANSWER

My experience of 15 hours has taught me that trying to serve an Angular app with Express during development is NOT a good idea. The proper way is to run Angular and Express as two different apps on two different ports. Angular will be served on port 4200 and Express on port 3000 as usual. Then configure a proxy for API calls to Express app.

Add proxy.config.json to root of Angular 2 project:

{
  "/api/*":{
    "target":"http://localhost:3000",
    "secure":false,
    "logLevel":"debug"
  }
}

Open up a new terminal tab and run this command to start Express app:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js is usually named server.js or app.js. server is a directory where you keep all your Express app files)

Open up a second terminal tab and run this command to start Angular app:

ng serve --proxy-config proxy.config.json

This will ensure that Angular app is rebuilt and browser reloaded when a change is made to any Angular app file. Similarly, Express server will restart when a change is made to any Express app files.

Your Angular app is here: http://localhost:4200/

Watch this video to see how to configure a proxy for your API calls with Angular CLI

NOTE: this setup only applies for development environment. In production, you will want to run ng build and place the Angular app inside a dist directory to be served up by Express. In production, there is only ONE app running - an Express app serving up your Angular app.

PREVIOUS ANSWER

Using input from @echonax I came up with this solution which is quite fast:

  • Add Express to Angular 2 app (built with Angular CLI) as in this tutorial
  • Run this in terminal:

ng build -w & nodemon server.js --watch dist --watch server

This will rebuild the Angular app into the dist folder, and the node server will restart each time that happens. However, there is NOT automatic browser refresh with this setup :(

More on that here:

https://github.com/jprichardson/reload

Original Thread

By anonymous    2018-01-01

I am using Angular CLI latest version and nodeJS as well, both running in localhost as different project and different port number, Angular (4200) and NodeJS (8088), added proxy settings in angular following this video ( https://www.youtube.com/watch?v=OjmZPPKaj6A ), then run command npm start.

enter image description here

now listens my nodeJs port number and getting response in error block.

enter image description here

When I run http://localhost:4200/api/sessin in browser, getting response on the screen.

example : {"message":"session expired"}

app.component.js

import { Component,Inject  } from '@angular/core';
import { Http, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { HeroFormComponent } from './hero-form/hero-form.component';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    private url = "/api/sessin";
    data:any = {};
    constructor(private http:Http){
        console.log("constructor");
        this.fetchData();
    }
    getData(){
        return this.http.get(this.url).map((res:Response)=>res.json());
    }
    fetchData(){
        this.getData().subscribe(data=>{
            console.log(data);
            this.data = data;
        })
    }
}

proxy.conf.json

{
    "/api":{
        "target":"http://localhost:8088",
        "secure":false,
        "logLevel":"debug"
    }
}

nodeJS - api.js

router.get('/sessin', function(req,res,next){
    if(!req.session.userId){
        return res.status(401).json({"message":"session expired"});
    }else{
        return res.status(200).json({"userId":req.session.userId,"message":"LoggedIn"});
    }
});

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.