why is angular universal giving me a Routing error

When serving my angular universal application I get this error thrown at me in the console

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'null'
Error: Cannot match any routes. URL Segment: 'null'

This happens only when serving through the universal server.ts, if I try to serve the application via

ng serve

Everything works flawlessly.

The thing i already tried:

  • I put enableTracing: true, inside my RouterModule.forRoot in my routing component and there i find this which leads me to believe its a Scroll problem
Scroll(anchor: 'null', position: 'null')

Router Event: Scroll

Scroll {
  routerEvent: NavigationEnd {
    id: 1,
    url: '/dettaglio-annuncio/annuncio-a-via-a-daosta-11-li-116-78528697',
    urlAfterRedirects: '/dettaglio-annuncio/annuncio-a-via-a-daosta-11-li-116-78528697'
  },
  position: null,
  anchor: null
}

Angular is running in development mode. Call enableProdMode() to enable production mode.

Router Event: NavigationStart

NavigationStart(id: 1, url: '/null')
NavigationStart {
  id: 1,
  url: '/null',
  navigationTrigger: 'imperative',
  restoredState: null
}

Router Event: NavigationError

NavigationError(id: 1, url: '/null', error: Error: Cannot match any routes. URL Segment: 'null')

NavigationError {
  id: 1,
  url: '/null',
  error: Error: Cannot match any routes. URL Segment: 'null'

As you can see in the Router Event: Scroll position and anchor are null, and after receiving that event (I couldn’t figure out what fires it), an event of tipe NavigationStart is fired but it’s wrong because the url is set to /null

NavigationStart {
  id: 1,
  url: '/null',
  navigationTrigger: 'imperative',
  restoredState: null
}

Which obviously makes the app throw an error, stalls the entire web application and is driving me insane.

Here’s my 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/PROJECT_NAME/browser'); //obscured for client privacy
  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) => { });
  // 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}]});
  });

  // server.get('/:routeParam', (req, res) => { res.render(indexHtml, {req}); //note 'index' uses the Universal engine })

  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';

Source: Angular Questions