Angular 5 上的 Httpclient 出现 404 错误

服务器端渲染需要绝对路径，您需要制作一个拦截器，将绝对路径转换为相对路径。

重要的！ 请务必将“/”放在路径的开头。如果“路径/到/你的/api”然后是“/路径/到/你的/api”

import { Injectable, Inject, Optional } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {

  constructor(@Optional() @Inject('serverUrl') protected serverUrl: string) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const serverReq = !this.serverUrl ? req : req.clone({
      url: `${this.serverUrl}${req.url}`
    });

    return next.handle(serverReq);

  }

}

服务器.js

'use strict';

require('zone.js/dist/zone-node');

const ngCore = require('@angular/core');
const express = require('express');
const ngUniversal = require('@nguniversal/express-engine');
const appServer = require('./dist-server/main.bundle');
var MobileDetect = require('mobile-detect')

const app = express();

ngCore.enableProdMode();

function angularRouter(req, res) {

  res.render('index', {
    req,
    res,
    providers: [{
      provide: 'serverUrl',
      useValue: `http://your.url`
    }]
  });
}



app.use((req,res, next) => {
  const md = new MobileDetect(req.headers['user-agent']);
  if(md.mobile()) {
    res.sendFile(`/srv/nodejs/mobile/index.html`);
  }
  next();
})


app.get('/', angularRouter);

app.use(express.static(`${__dirname}/dist`));


app.engine('html', ngUniversal.ngExpressEngine({
  bootstrap: appServer.AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', 'dist');

app.get('*', angularRouter);
app.post('*', angularRouter);
app.delete('*', angularRouter);
app.put('*', angularRouter);

app.listen(3000, () => {
  console.log(`angular is running on 3000 port`);
});