Custom 404 page using Angular and Express - node.js

Question

I am using a MEAN stack and I am trying to build a custom 404 page for my project using Angular.
In Angular app.module.ts I have written this:
const appRoutes: Routes = [
{
path: 'students',
component: StudentComponent,
data: {title: 'Student List'}
},
{
path: 'student-details/:id',
component: StudentDetailComponent,
data: {title: 'Student Details'}
},
{
path: 'student-create',
component: StudentCreateComponent,
data: {title: 'Create a new Student'}
},
{
path: 'student-edit/:id',
component: StudentEditComponent,
data: {title: 'Edit Student'}
},
{
path: '',
redirectTo: '/students',
pathMatch: 'full'
},
{
path: '**',
component: PageNotFoundComponent,
data: {title: 'Page Not Found'}
}
];
#NgModule({
declarations: [
AppComponent,
StudentComponent,
StudentDetailComponent,
StudentCreateComponent,
StudentEditComponent,
PageNotFoundComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot(
appRoutes,
{enableTracing: true}
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
But in fact I think that when I write an URL that doesn't exist Express make a response, not Angular. I know that Express is answering because, when I removed this code from server.js:
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
When I write an url that doesn't exist, I get the answer "Cannot GET /urlThatDoesntExist".
The matter is that the other routing urls set in Angular are working but the 404 page is not.
I am using Express to serve the Angular app using:
app.use('/', express.static(path.join(__dirname, 'dist')));
How can I set the Angular 404 page working above Express? Thanks!

Answer 1

If you want every request to reach angular (so you can handle 404s on the client side) you can use an express route like this:
// all routes lead to to index.html
const router = express.Router();
router.get('*', (req, res) => {
res.sendFile(path.join(DIR, 'index.html'));
});
this.express.use('*', router);