Run Express service and Angular 6 app in parallel

Question

I am currently working on creating a CRUD app using Angular6 with MSSQL.

I have successfully retrieved data from my local database and created the desired routes but I am having trouble displaying the data in the frontend.

//masterList.service.ts

import {
  Injectable
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';
import {
  MasterList
} from './MasterList';

@Injectable({
  providedIn: 'root'
})
export class MasterListService {

  uri = 'http://localhost:4000/masterList';

  constructor(private http: HttpClient) {}

  getMasterList() {
    console.log(this);
    return this
      .http
      .get(`${this.uri}/`);
  }
}
//package.json

"name": "ng6crud",
"version": "0.0.0",
"scripts": {
  "ng": "ng",
  "start": "nodemon server.js && ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

Running:

npm start

This returns the service with the data but the app is not compiled, and reversing the order does the opposite, with the error:

ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:4000/masterList/", ok: false, …}

How do I get data from my service: 4000 and have it published: 4200 at the same time?

Amir Arbabian · Answer 1 · 2019-01-31T21:48:29.103

4

If you have your server hosted on port 4000, you need to specify proxy for your angular app so it will redirect all api calls to port 4000, even if it's hosted on port 4200. Add proxy.conf.json next to your package.json:

{
  "/": {
    "target": "http://localhost:4000",
    "secure": false
  }
}

in MasterListService do something like:

getMasterList() {
  return this
    .http
    .get(`/masterList`);
}

and finally change your package.json npm start script:

...
"scripts": {
   ...
   "start": "nodemon server.js && ng serve --proxy-config proxy.conf.json",
   ...
}

Hope that helps.

edited Jan 31 '19 at 21:48

answered Jan 31 '19 at 21:42

Amir Arbabian

3,419
1
6
12

I wasn't really sure what I needed to resolve this, but your answer definitely got me on the right track! Thanks! – O.O Feb 01 '19 at 20:24

score 1 · Accepted Answer · answered Feb 01 '19 at 20:22

Ended up doing a number of steps to get this to work, most important being using concurrently which allowed both ports to run

npm install concurrently --save

//proxy.conf.json

{
  "/masterList": {
    "target": "http://localhost:4000",
    "secure": true, //or false when cors is not in use with express
    "logLevel": "debug"
  }
}

//package.json

"scripts": {
  "ng": "ng",
  "start": "concurrently \"npm run serve-api\" \"npm run serve\"",
  "serve": "ng serve --proxy-config proxy.conf.json",
  "serve-api": "nodemon server.js --watch server",
  "build": "ng build",
  "test": "ng test"...
}

//service.ts
import {
  Injectable
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';
import {
  MasterList
} from './MasterList';

@Injectable({
  providedIn: 'root'
})
export class MasterListService {

  uri = '/masterList';

  constructor(private http: HttpClient) {}

  getMasterList() {
    return this
      .http
      .get(`${this.uri}`);
  }

}

`concurrently` looks like a very interesting option. How should I structure the project? I started with an angular application. Do I create a top-level sub-folder called `/server` and then maintain a separate node.js project for the server within that folder? — Web User, Oct 20 '19 at 13:58

Run Express service and Angular 6 app in parallel

2 Answers2

Linked