Configure a proxy for your API calls with Angular CLI

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.

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

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