并行运行Express服务和Angular 6应用 [英] Run Express service and Angular 6 app in parallel

问题描述

我目前正在使用

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"
},

运行:

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, …}

如何从服务4000中获取数据并同时发布它们:4200?

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

推荐答案

最终做了很多步骤来使它起作用，最重要的是使用

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

//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}`);
  }

}

这篇关于并行运行Express服务和Angular 6应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！