node.js - Angular 为 2 的 Node ，在 url 栏中输入路线时出现 404 错误

Question

当使用 Angular 为2的 Node 时，发生了奇怪的事情，我想修复它。基本上，如果我要在浏览器网址栏中输入网址中的路线，例如 localhost:3000/about 。我得到 Cannot GET/home。但是，当单击我制作的导航栏时，它具有相同的链接/about。它工作得很好。我知道这是 Node 的问题，因为最初我使用的是 dev-server，这个错误在 Angular 2 中没有发生。

Angular 2 路线

    const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
  { path: 'private', component: PrivateComponent},
  { path: 'title', component: TitleComponent},
  { path: 'shop', component: WelcomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'login', component: LoginComponent},
  { path: 'register', component: RegisterComponent}
];

导航栏

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <div class="container">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
      &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
      <a class="navbar-brand" [routerLink]="['/home']">Vietnam Films</a>

      <div class="nav navbar-nav">
        <a class="nav-item nav-link active" [routerLink]="['/home']">
          Home <span class="sr-only">(current)</span>
        </a>
        <a class="nav-item nav-link"  [routerLink]="['/about']">About</a>
        <a class="nav-item nav-link"  [routerLink]="['/film']">Film News</a>
        <a class="nav-item nav-link"  [routerLink]="['/shop']"  *ngIf="auth.loggedIn()">Shop</a>
        <a class="nav-item nav-link" [routerLink]="['/checkout']"  *ngIf="auth.loggedIn()" >Checkout</a>
        <a class="nav-item nav-link" (click)="auth.login()" *ngIf="!auth.loggedIn()">Login</a>
        <a class="nav-item nav-link" (click)="auth.logout()" *ngIf="auth.loggedIn()" >Logout</a>
      </div>

      <div class="nav navbar-nav  float-xs-right">
        <db-cart-menu  *ngIf="auth.loggedIn()" ></db-cart-menu>
      </div>

    </div>
  </div>
</nav>

Node 后端

    var express = require('express');
var fs = require('fs');
var jwt = require('express-jwt');
var favicon = require('serve-favicon')
var http = require('http');
var https = require('https');
var path = require('path');
var logger = require('morgan');
var session = require('express-session');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var bcrypt = require('bcryptjs');
var cors = require('cors');
var config = require('./config');

    // models for the mongodb
    var Director = require('./models/directors');
    var Film =  require('./models/films');
    var Product = require('./models/products');
    var User = require('./models/users');



    var app = express();

    // Create an HTTP service.
http.createServer(app).listen(3000);
console.log("listen on 3000");
// Create an HTTPS service identical to the HTTP service.
https.createServer(options, app).listen(8000);

// links the node server to the webpage
app.use(express.static(path.join(__dirname, '../')));
app.use(cors());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(cookieParser());

//the rest is the rest api routes

Answer 1

由于 /about 没有在服务器端定义为路由，因此您需要将它们一一定义，或者需要添加类似的内容

app.get('/*',  function(req, res, next) {
    res.sendFile('index.html', { root: __dirname }); 
});

将每次刷新重定向到 Angular 路由。