Question

当使用角度为2的节点时，会发生我想要修复的奇怪事情。基本上，如果我在网址中输入路由，例如浏览器网址栏中的localhost:3000/about。我得到了无法获得/回家。但是，当我点击我做的具有相同链接/左右的导航栏时。它工作得很好。我知道这是节点的一个问题，因为最初我使用dev-server这个错误没有发生在角度2。

有角度的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>

节点后端

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

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

角度为2的节点，在url栏中输入路径时会出现404错误

1 个答案: