Javascript angular 5和node.js express产品构建问题

当我尝试对angular和node.js项目进行生产构建时，遇到了一个问题。 当我使用命令

ngserve

运行angular项目，并使用

nodemon server

运行后端时，一切正常。但当我执行

ngbuild--prod

并修改后端以从“dist”中获取静态数据时。我没有得到应用程序的全部功能，我通常有一个注册页面和登录页面，但配置文件页面有问题。在这个页面上，应该显示用户的个人信息，但是在服务器的响应日期，我得到一个空的正文，状态是200 OK。 下面我引用我的代码摘录和inspector的截图。 请帮助了解问题所在。 如蒙指教，我将不胜感激

服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {User} from './user';

@Injectable()
export class MntApiService {
  private data: any = [];
  private mntAPI = 'http://localhost:3000';

  constructor( private _http: HttpClient ) {
  }

  getUsers(): Observable<any> {
    return this._http.get<any>( this.mntAPI + '/users' );
  }

  addUser( user: User ): Observable<any> {
    return this._http.post<any>( this.mntAPI + '/signup', user );
  }

  addEditUser( id, user: User ): Observable<any> {
    return this._http.post<any>( this.mntAPI + '/profile/' + id, user );
  }

  getById( id: string ): Observable<any> {
    return this._http.get( this.mntAPI + '/profile/' + id, {responseType: 'json'} )
      .do( data => {
        this.data = data;
        console.log( data );
      } )
      .catch( this.handleError );
  }

  private handleError( err: HttpErrorResponse ) {
    console.log( err );
    return Observable.throw( err.message );
  }
}

node.js文件users.js

router.get('/profile/:id', (req, res) => {
  const id = req.params.id;
  console.log(id);
  let sql = 'SELECT * FROM users WHERE id = ?';

  config.query(sql, id, (err, user) => {
    console.log(user);
    if (err) {
      res.status(500).json({
        message: err
      });
      return;
    } else {
      res.status(200).json({
        user: user
      });
    }
  });
});

mypackage.json

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@auth0/angular-jwt": "^2.0.0",
    "@nguniversal/express-engine": "^6.0.0",
    "@types/jwt-decode": "^2.2.1",
    "@types/moment": "^2.13.0",
    "bcrypt": "^2.0.0",
    "body-parser": "^1.18.2",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "dotenv": "^5.0.1",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "jsonwebtoken": "^8.2.1",
    "jwt-decode": "^2.2.0",
    "moment": "^2.22.1",
    "morgan": "^1.9.0",
    "mysql": "^2.15.0",
    "ngx-slick": "^0.1.3",
    "node-mysql": "^0.4.2",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "script-loader": "^0.7.2",
    "slick-carousel": "^1.8.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "nodemon": "^1.17.3",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

app.js

const express = require('express');
const app = express();
const morgan = require('morgan');
const bodyParser = require('body-parser');
const path = require('path');

const usersRoutes = require('./api/routes/users');


app.use(morgan('dev'));

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res ) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());


app.use((req, res, next) => {
  res.Header('Content-Type', 'application/json');
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  if (req.method === 'OPTIONS') {
    res.Header('Content-Type', 'application/json');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
    return res.status(200).json({});
  }
  next();
});



app.use('/', usersRoutes);


app.use((req, res, next) => {
  const error = new Error('Not found');
  error.status = 404;
  next(error);
});
app.use((error, req, res, next) => {
  console.log(error);
  res.status(error.status || 500);
  res.json({
    error: {
      message: error.message
    }
  });
});

module.exports = app;

和截图：

---

如上所述，您的应用程序正在从服务器接收html响应（错误消息和文本内容）。第二个屏幕截图证实了这一点（在响应标题部分，显示内容类型：text/html）

一个快速修复方法是在发送到服务器的请求头中指定response

Accept:text/html

。如下所示：

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

import { Observable } from "rxjs";

@Injectable() 
export class YOURService{

  headers = new HttpHeaders({
    "Accept": "text/html"  // <-- add this
  });


constructor(private _http: HttpClient) {}

  getUsers(): Observable<any> {
    return this._http.get<any>( this.mntAPI + '/users', {headers: this.headers} );
  }

}

---

在第一个屏幕截图中，错误表示您正在从服务器接收html响应（错误消息

和
文本
内容）。第二个屏幕截图确认了这一点（在
response header
部分，它说
Content-Type:text/html
。您好，谢谢您的回答，但是没有帮助，这是相同的错误，请求正文是空的。问题是，我的服务器以json格式发送数据，我不明白为什么标题中的答案是text/html格式。我试图在c中找到错误onsole在[link]router.get（'/profile/：id'，（req，res）=>{console.log（'hello world'）；[link]行之后至少有一个简单的“hello world”；[link]，但它不会打印到控制台，尽管响应正确[link]get/profile/24200 1.276 ms-681[link]。但是在回答我的“hello world”之后@sugarmecan您可以在node.js服务器上执行某些操作：res.setHeader（'Content-Type'，'application/json'）；和res.send（json.stringify（{user:user}））；并且不设置“Accept”：“text/html”在你的Angular应用程序中。同样没有帮助，上面我在问题描述中添加了文件代码app.js。这让我很难过，为什么服务器没有以正确的格式发送数据。如果这有帮助的话，我可以给git项目存储库提供链接。仅通过个人消息。请随时向我发送pm。这里没有个人消息，请告诉我您的联系信息，例如电子邮件给我
import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

import { Observable } from "rxjs";

@Injectable() 
export class YOURService{

  headers = new HttpHeaders({
    "Accept": "text/html"  // <-- add this
  });


constructor(private _http: HttpClient) {}

  getUsers(): Observable<any> {
    return this._http.get<any>( this.mntAPI + '/users', {headers: this.headers} );
  }

}

router.get('/profile/:id', (req, res) => {
  const id = req.params.id;
  console.log(id);
  let sql = 'SELECT * FROM users WHERE id = ?';

  config.query(sql, id, (err, user) => {
    console.log(user);
    res.setHeader('Content-Type', 'application/json'); // <-- set header here
    if (err) {
      res.status(500).send(JSON.stringify({
        message: err
      }));
    } else {
      res.status(200).send(JSON.stringify({ // <-- send JSON data here
        user: user
      }));
    }
  });
});

const express = require('express');
const app = express();
const morgan = require('morgan');
const bodyParser = require('body-parser');
const path = require('path');

const usersRoutes = require('./api/routes/users');

app.use(morgan('dev'));

app.use(express.static(path.join(__dirname, 'dist')));

// ======= This should be removed ========================
// app.get('*', (req, res) => {
// res.sendFile(path.join(__dirname, 'dist/index.html'));
// });
// =======================================================

app.use(bodyParser.urlencoded({extended : true}));
app.use(bodyParser.json());

app.use((req, res, next) => {

  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers',
             'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
    return res.status(200).json({});
  }
  next();
});

app.use('/', usersRoutes);

app.use((req, res, next) => {
  const error = new Error('Not found');
  error.status = 404;
  next(error);
});
app.use((error, req, res, next) => {
  console.log(error);
  res.status(error.status || 500);
  res.json({error : {message : error.message}});
});

module.exports = app;