Angular + Node + Universal remove # with working refresh - node.js

Question

I am using Angular 13 + Angular Universal + Node.js.
I have deployed app on server, but I have big problem with removing # from URL.
I have built app using
npm run build:ssr
And I am serving it using node.js app on my server using :
app.use(express.static(__dirname + '/dist/app-name/browser'));
app.get('/', (req, res) => res.sendFile(path.join(__dirname)));
When I use HashLocationStrategy, then everything works fine. Problem appears when I am trying to remove hash from link.
I changed it to PathLocationStrategy and I am getting error 404 on refresh on other path than '/'.
I was trying to add different routes in node.js file to sendFile (f.e.)
app.get('/subpage', (req, res) => res.sendFile(path.join(__dirname)));
But it didn't worked for me.
I was also trying to overwite # with node.js, but as it comes from angular app it's impossible to do it from node.js code.
My files :
app.server.module.ts
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import {UniversalInterceptor} from './universal-interceptor.service';
import {HTTP_INTERCEPTORS} from '#angular/common/http';
import {NgxSsrTimeoutModule} from '#ngx-ssr/timeout';
#NgModule({
imports: [
AppModule,
ServerModule,
NgxSsrTimeoutModule.forRoot({ timeout: 5000 }),
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: UniversalInterceptor,
multi: true,
}
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
server.ts
import 'zone.js/dist/zone-node';
import {ngExpressEngine} from '#nguniversal/express-engine';
import * as express from 'express';
import {join} from 'path';
import {AppServerModule} from './src/main.server';
import {APP_BASE_HREF} from '#angular/common';
import {existsSync} from 'fs';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/app-name/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Our Universal express-engine (found # https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
server.get('/api/**', (req, res) => {
res.status(404).send('data requests are not yet supported');
});
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, {req, providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}]});
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
How to to deploy app without '#' in url with working refresh?

Answer 1

Okay, so I finally found solution for this. My problem was, that I needed to give absolute path to my index.html file for all angular routes. So finally i changed
app.get('/', (req, res) => res.sendFile(path.join(__dirname)));
to
app.get('/**', (req, res) => {
res.sendFile(path.join(__dirname + '/dist/app-name/browser/index.html'))
});

Answer 2

Try this:
app.get('*', (req, res) => res.sendFile(path.join(__dirname)));
put it near the end middleware chain