Angular 16/通用 ssr 错误“TypeError:this.delegate.createRenderer 不是函数”

问题描述 投票:0回答:1

将我的 Angular 通用应用程序升级到版本 16 后,ssr 开发服务器不再工作。具体来说,它编译成功,但是当我尝试访问服务器启动的端口时,它会在控制台中抛出一堆错误,这些错误可以追溯到

dist
文件夹中的文件。

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


然后,当导航到

http://localhost:4201
时,它不会渲染应用程序并抛出以下内容:

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)

我试图在网上寻找这个问题的答案,但一无所获。我不确定我有哪些选项以及要尝试什么,因为它是一种模糊而复杂的错误,没有指出我可以控制的任何代码行。

我一直专注于调试抛出的第一个错误

TypeError: this.delegate.createRenderer is not a function
,但现阶段还没有取得任何进展。

angular angular-universal angular16 angular-upgrade
1个回答
0
投票

我已经弄清楚如何解决这个问题,因此将解决方案发布在这里以供参考。 我的 app.server.module.ts 文件中有这段代码:

/**
 * 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);

在提供者数组中:

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

删除此代码修复了错误。

© www.soinside.com 2019 - 2024. All rights reserved.