Запустите службу Express и приложение Angular 6 параллельно - PullRequest
0 голосов
/ 01 февраля 2019

В настоящее время я работаю над созданием приложения CRUD, используя Angular6 с MSSQL.

Я успешно получил данные из своей локальной базы данных и создал нужные маршруты, но у меня возникают проблемы с отображением данных во внешнем интерфейсе.

//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

Возвращает службу с данными, но приложение не скомпилировано, и порядок в обратном порядкеделает наоборот:

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

Как мне получить данные из моего сервиса: 4000 и опубликовать их одновременно: 4200?

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Закончилось выполнение ряда шагов, чтобы заставить это работать, наиболее важным было одновременное использование , что позволило обоим портам работать

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

}
0 голосов
/ 01 февраля 2019

Если ваш сервер размещен на порте 4000 , вам нужно указать прокси для вашего углового приложения, чтобы оно перенаправляло все вызовы API к порту 4000 , даже если он расположен на порте 4200. Добавьте proxy.conf.json рядом с package.json :

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

в MasterListService сделать что-то вроде:

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

и, наконец, изменить свой package.json npm стартовый скрипт:

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

Надеюсь, что это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...