将我的 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
,但现阶段还没有取得任何进展。
我已经弄清楚如何解决这个问题,因此将解决方案发布在这里以供参考。 我的 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],
},
删除此代码修复了错误。