为什么 express 拦截 angular 路由器？

Question

App.js

var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');


var statements = require('./routes/route');
var app = express();



app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ 'extended': 'false' }));
app.use(express.static(path.join(__dirname, 'dist/statement-rater-app')));

app.use('/', express.static(path.join(__dirname, 'statement-rater-app')));
app.use('/api/v1/statements', statements);
//app.use('/images', express.static('images'))

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  //console.log(res);
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  console.log(err.message);
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  console.log("this is where it's happening");
  
  // render the error page
  res.status(err.status || 500);
  res.json({ error: err })
});

module.exports = app;

Angular路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CompanyListComponent } from './company-list/company-list.component';

const routes: Routes = [
  {
    path: '', 
    component: HomeComponent, 
    //canActivate: [MsalGuard]
  }, 
  {
    path: 'company-list',
    component: CompanyListComponent
  }
  


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

应用组件HTML

<mat-toolbar class="mat-elevation-z2">
  <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
    <span fxFlex class="team-logo"><img src="../assets/images/logo.png" alt="Logo" aria-label="logo" width="100" /> </span>
  </div>
  <span fxFlex></span>
  <div fxFlex = "20">
    <mat-nav-list fxFlex fxLayout="row">
      <a mat-list-item [routerLink]="['/']" routerLinkActive="active" target="_top"> <mat-icon>home</mat-icon> Home</a>
      <a mat-list-item [routerLink]="['company-list']" routerLinkActive="active" target="_top"><mat-icon>list</mat-icon> List</a>
      <a mat-list-item [routerLink]="['logout']" routerLinkActive="active" target="_top"><mat-icon>clear</mat-icon> Logout</a>
    </mat-nav-list>
  </div>
</mat-toolbar>

<router-outlet></router-outlet>

我有这个 node.js 和 angular 应用程序，可以在单个 link（家庭）上正常工作。我可以做任何事情，但是当我在 HTML 上添加另一个 link 时，主页 link 仍然有效，但是 company-list 显示以下错误：

{"error":{"status":404}}

我不知道发生了什么，也不知道如何解决。我用谷歌搜索并尝试了在和其他一些地方找到的解决方案，但 link 仍然显示该错误。发生什么事了？

更新

按照建议，我也添加了以下代码，但我仍然遇到类似的错误。

 app.all('/*', function (req, res) {
  res.status(200).sendFile(`/` + __dirname );
});

这是我得到的错误：

{"error":{"errno":-4058,"code":"ENOENT","syscall":"stat","path":"C:\Users\username\source\repos\statement-rater-appstatement-rater-app","expose":false,"statusCode":404,"status":404}}

Answer 1

这太奇怪和烦人了。只需要在 routerLink 中的文本前面添加一个斜杠 ()。

<mat-nav-list fxFlex fxLayout="row">
  <a mat-list-item [routerLink]="['/']" routerLinkActive="active" target="_top"> <mat-icon>home</mat-icon> Home</a>
  <a mat-list-item [routerLink]="['/company-list']" routerLinkActive="active" target="_top"><mat-icon>list</mat-icon> List</a>
  <a mat-list-item [routerLink]="['/logout']" routerLinkActive="active" target="_top"><mat-icon>clear</mat-icon> Logout</a>
</mat-nav-list>

为什么 express 拦截 angular 路由器？

Why is express intercepting angular router?

express

angular

angular-router