Configure a proxy for your API calls with Angular CLI
53 4 15044
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.
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:
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"});
}
});
Submit Your Video
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