Why is express intercepting angular router?

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 Routing

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 { }

AppComponent 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>

I have this node.js and angular app that works fine with a single link (home). I can do everything on this, but when I added another link on the HTML, the home link still works, but company-list shows the following error:

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

I have no idea what's going on and how to fix. I googled and tried solutions that were found on RouterLink does not work and a few other places but the link still shows that error. What's happening?

Update

As suggested, I also added the folllowing code, but I'm still getting similar error.

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

This is the error I get:

{"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

this is so strange and annoying. All it took was a slash() in front of the text in the 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>