Angular 16 / universal ssr error 'TypeError: this.delegate.createRenderer is not a function'

Question

After upgrading my angular universal app to version 16, the ssr dev server no longer works. To be specific, it compiles successfully, but then when I try to access the port the server starts on, it throws a bunch of errors in the console that can be traced to files in the dist folder.

** Angular Universal Live Development Server is listening on http://localhost:4201, open your browser on http://localhost:4201 **

---

then when navigating to http://localhost:4201 it does not render the app and throws the following:

Error Handler: TypeError: this.delegate.createRenderer is not a function
    at AnimationRendererFactory.createRenderer (/my-user/app-name/dist/project-name/server/main.js:159068:38)
    at ComponentFactory.create (/my-user/app-name/dist/project-name/server/main.js:125792:42)
    at ApplicationRef.bootstrap (/my-user/app-name/dist/project-name/server/main.js:140222:40)
    at /my-user/app-name/dist/project-name/server/main.js:139922:60
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (/my-user/app-name/dist/project-name/server/main.js:139922:40)
    at /my-user/app-name/dist/project-name/server/main.js:139893:18
    at _ZoneDelegate.invoke (/my-user/app-name/dist/project-name/server/main.js:65733:158)
    at Object.onInvoke (/my-user/app-name/dist/project-name/server/main.js:122881:25)
    at _ZoneDelegate.invoke (/my-user/app-name/dist/project-name/server/main.js:65733:46)
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
Error Handler: Error: Uncaught (in promise): Error: NG04014: Invalid configuration of route ':category/:subCategory': path and matcher cannot be used together
Error: NG04014: Invalid configuration of route ':category/:subCategory': path and matcher cannot be used together
    at validateNode (/my-user/app-name/dist/project-name/server/main.js:181599:13)
    at validateConfig (/my-user/app-name/dist/project-name/server/main.js:181549:5)
    at validateNode (/my-user/app-name/dist/project-name/server/main.js:181619:5)
    at validateConfig (/my-user/app-name/dist/project-name/server/main.js:181549:5)
    at /my-user/app-name/dist/project-name/server/main.js:182985:56
    at /my-user/app-name/dist/project-name/server/main.js:52793:31
    at OperatorSubscriber._this._next (/my-user/app-name/dist/project-name/server/main.js:50895:9)
    at OperatorSubscriber.Subscriber.next (/my-user/app-name/dist/project-name/server/main.js:48634:12)
    at /my-user/app-name/dist/project-name/server/main.js:53006:20
    at OperatorSubscriber._this._next (/my-user/app-name/dist/project-name/server/main.js:50895:9)
    at resolvePromise (/my-user/app-name/dist/project-name/server/main.js:66472:19)
    at resolvePromise (/my-user/app-name/dist/project-name/server/main.js:66425:9)
    at /my-user/app-name/dist/project-name/server/main.js:66533:9
    at _ZoneDelegate.invokeTask (/my-user/app-name/dist/project-name/server/main.js:65760:171)
    at AsyncStackTaggingZoneSpec.onInvokeTask (/my-user/app-name/dist/project-name/server/main.js:122558:22)
    at _ZoneDelegate.invokeTask (/my-user/app-name/dist/project-name/server/main.js:65760:54)
    at Object.onInvokeTask (/my-user/app-name/dist/project-name/server/main.js:122870:25)
    at _ZoneDelegate.invokeTask (/my-user/app-name/dist/project-name/server/main.js:65760:54)
    at Zone.runTask (/my-user/app-name/dist/project-name/server/main.js:65562:39)
    at drainMicroTaskQueue (/my-user/app-name/dist/project-name/server/main.js:65931:23) {
  rejection: RuntimeError: NG04014: Invalid configuration of route ':category/:subCategory': path and matcher cannot be used together
      at validateNode (/my-user/app-name/dist/project-name/server/main.js:181599:13)
      at validateConfig (/my-user/app-name/dist/project-name/server/main.js:181549:5)
      at validateNode (/my-user/app-name/dist/project-name/server/main.js:181619:5)
      at validateConfig (/my-user/app-name/dist/project-name/server/main.js:181549:5)
      at /my-user/app-name/dist/project-name/server/main.js:182985:56
      at /my-user/app-name/dist/project-name/server/main.js:52793:31
      at OperatorSubscriber._this._next (/my-user/app-name/dist/project-name/server/main.js:50895:9)
      at OperatorSubscriber.Subscriber.next (/my-user/app-name/dist/project-name/server/main.js:48634:12)
      at /my-user/app-name/dist/project-name/server/main.js:53006:20
      at OperatorSubscriber._this._next (/my-user/app-name/dist/project-name/server/main.js:50895:9) {
    code: 4014
  },
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: RuntimeError: NG04014: Invalid configuration of route ':category/:subCategory': path and matcher cannot be used together
        at validateNode (/my-user/app-name/dist/project-name/server/main.js:181599:13)
        at validateConfig (/my-user/app-name/dist/project-name/server/main.js:181549:5)
        at validateNode (/my-user/app-name/dist/project-name/server/main.js:181619:5)
        at validateConfig (/my-user/app-name/dist/project-name/server/main.js:181549:5)
        at /my-user/app-name/dist/project-name/server/main.js:182985:56
        at /my-user/app-name/dist/project-name/server/main.js:52793:31
        at OperatorSubscriber._this._next (/my-user/app-name/dist/project-name/server/main.js:50895:9)
        at OperatorSubscriber.Subscriber.next (/my-user/app-name/dist/project-name/server/main.js:48634:12)
        at /my-user/app-name/dist/project-name/server/main.js:53006:20
        at OperatorSubscriber._this._next (/my-user/app-name/dist/project-name/server/main.js:50895:9) {
      code: 4014
    }
  },
  zone: <ref *1> Zone {
    _parent: Zone {
      _parent: [Zone],
      _name: 'asyncStackTagging for Angular',
      _properties: {},
      _zoneDelegate: [_ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate: <ref *2> _ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular *1],
      _parentDelegate: [_ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [_ZoneDelegate],
      _invokeCurrZone: [Circular *1],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [_ZoneDelegate],
      _handleErrorCurrZone: [Circular *1],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [_ZoneDelegate],
      _scheduleTaskCurrZone: [Circular *1],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [_ZoneDelegate],
      _invokeTaskCurrZone: [Circular *1],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [_ZoneDelegate],
      _cancelTaskCurrZone: [Circular *1],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [_ZoneDelegate],
      _hasTaskDlgtOwner: [Circular *2],
      _hasTaskCurrZone: [Circular *1]
    }
  },
  task: ZoneTask {
    _zone: <ref *1> Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [_ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: [RuntimeError]
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function (anonymous)],
    invoke: [Function (anonymous)],
    consoleTask: null
  }
}
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
Unhandled Promise rejection: Cannot read properties of undefined (reading 'redirects') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'redirects')
    at Object.dynamicRouteFactory [as useFactory] (/my-user/app-name/dist/project-name/server/404.js:3719:54)
    at Object.factory (/my-user/app-name/dist/project-name/server/main.js:121340:32)
    at /my-user/app-name/dist/project-name/server/main.js:121247:33
    at runInInjectorProfilerContext (/my-user/app-name/dist/project-name/server/main.js:112849:5)
    at R3Injector.hydrate (/my-user/app-name/dist/project-name/server/main.js:121246:9)
    at R3Injector.get (/my-user/app-name/dist/project-name/server/main.js:121126:23)
    at injectInjectorOnly (/my-user/app-name/dist/project-name/server/main.js:112888:36)
    at ɵɵinject (/my-user/app-name/dist/project-name/server/main.js:112894:59)
    at injectArgs (/my-user/app-name/dist/project-name/server/main.js:113018:17)
    at Object.multiRecord.factory (/my-user/app-name/dist/project-name/server/main.js:121227:37) TypeError: Cannot read properties of undefined (reading 'redirects')
    at Object.dynamicRouteFactory [as useFactory] (/my-user/app-name/dist/project-name/server/404.js:3719:54)
    at Object.factory (/my-user/app-name/dist/project-name/server/main.js:121340:32)
    at /my-user/app-name/dist/project-name/server/main.js:121247:33
    at runInInjectorProfilerContext (/my-user/app-name/dist/project-name/server/main.js:112849:5)
    at R3Injector.hydrate (/my-user/app-name/dist/project-name/server/main.js:121246:9)
    at R3Injector.get (/my-user/app-name/dist/project-name/server/main.js:121126:23)
    at injectInjectorOnly (/my-user/app-name/dist/project-name/server/main.js:112888:36)
    at ɵɵinject (/my-user/app-name/dist/project-name/server/main.js:112894:59)
    at injectArgs (/my-user/app-name/dist/project-name/server/main.js:113018:17)
    at Object.multiRecord.factory (/my-user/app-name/dist/project-name/server/main.js:121227:37)
Unhandled Promise rejection: Cannot read properties of undefined (reading 'redirects') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'redirects')
    at Object.dynamicRouteFactory [as useFactory] (/my-user/app-name/dist/project-name/server/404.js:3719:54)
    at Object.factory (/my-user/app-name/dist/project-name/server/main.js:121340:32)
    at /my-user/app-name/dist/project-name/server/main.js:121247:33
    at runInInjectorProfilerContext (/my-user/app-name/dist/project-name/server/main.js:112849:5)
    at R3Injector.hydrate (/my-user/app-name/dist/project-name/server/main.js:121246:9)
    at R3Injector.get (/my-user/app-name/dist/project-name/server/main.js:121126:23)
    at injectInjectorOnly (/my-user/app-name/dist/project-name/server/main.js:112888:36)
    at ɵɵinject (/my-user/app-name/dist/project-name/server/main.js:112894:59)
    at injectArgs (/my-user/app-name/dist/project-name/server/main.js:113018:17)
    at Object.multiRecord.factory (/my-user/app-name/dist/project-name/server/main.js:121227:37) TypeError: Cannot read properties of undefined (reading 'redirects')
    at Object.dynamicRouteFactory [as useFactory] (/my-user/app-name/dist/project-name/server/404.js:3719:54)
    at Object.factory (/my-user/app-name/dist/project-name/server/main.js:121340:32)
    at /my-user/app-name/dist/project-name/server/main.js:121247:33
    at runInInjectorProfilerContext (/my-user/app-name/dist/project-name/server/main.js:112849:5)
    at R3Injector.hydrate (/my-user/app-name/dist/project-name/server/main.js:121246:9)
    at R3Injector.get (/my-user/app-name/dist/project-name/server/main.js:121126:23)
    at injectInjectorOnly (/my-user/app-name/dist/project-name/server/main.js:112888:36)
    at ɵɵinject (/my-user/app-name/dist/project-name/server/main.js:112894:59)
    at injectArgs (/my-user/app-name/dist/project-name/server/main.js:113018:17)
    at Object.multiRecord.factory (/my-user/app-name/dist/project-name/server/main.js:121227:37)

I have tried to find answers for this online, but found nothing. I am not sure which options I have and what to try, since it kind of vague and complicated error that doesn't point me to any line of code I have control over.

I have been focusing on debugging the first error thrown TypeError: this.delegate.createRenderer is not a function, but have not made any progress at this stage.

Answer 1

I have figured out how to fix this so posting the solution here for reference. I had this code in my app.server.module.ts file:

/**
 * Taken from https://github.com/angular/angular/issues/15098#issuecomment-308863439
 * to fix runtime error in server-side app related to using animations module in app
 */

const instantiateServerRendererFactory = (renderer: RendererFactory2, engine: AnimationEngine, zone: NgZone) =>
  new AnimationRendererFactory(renderer, engine, zone);

in the providers array:

    {
      provide: RendererFactory2,
      useFactory: instantiateServerRendererFactory,
      deps: [AnimationEngine, NgZone],
},

removing this code fixed the error.