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