Why does navigating to a route work, but when i put that URL into the address bar (Or reload page after navigating to it) express server returns error

Question

I'm using an Express server, and everything seem to be working fine. I run my Angular application on it and it runs as it should Navigating between the different routes works like a charm.

But if I navigate to a route, and reload the page in browser, the server returns "Internal Server Error" and the following appears in my server log:

    Error
    at XMLHttpRequest3.send (/Users/<path-to>/server/main.js:1:4025798)
    at Observable._subscribe (/Users/<path-to>/server/main.js:1:4264955)
    at Observable._trySubscribe (/Users/<path-to>/server/main.js:1:3520438)
    at Observable.subscribe (/Users/<path-to>/server/main.js:1:3520220)
    at DoOperator.call (/Users/<path-to>/server/main.js:1:3583421)
    at Observable.subscribe (/Users/<path-to>/server/main.js:1:3520074)
    at CatchOperator.call (/Users/<path-to>/server/main.js:1:3562760)
    at Observable.subscribe (/Users/<path-to>/server/main.js:1:3520074)
    at scheduleTask (/Users/<path-to>/main.js:1:640743)
    at Observable._subscribe (/Users/<path-to>/server/main.js:1:641346)

Unhandled Promise rejection: req.next is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: req.next is not a function
    at done (/Users/<path-to>/server/main.js:1:2200666)
    at _ZoneDelegate2.invoke (/Users/<path-to>/server/main.js:1:4048589)
    at Zone3.run (/Users/<path-to>/server/main.js:1:4040924)
    at /Users/<path-to>/server/main.js:1:4068136
    at _ZoneDelegate2.invokeTask (/Users/<path-to>/server/main.js:1:4049527)
    at Zone3.runTask (/Users/<path-to>/main.js:1:4042009)
    at drainMicroTaskQueue (/Users/<path-to>/server/main.js:1:4053298) TypeError: req.next is not a function
    at done (/Users/<path-to>/server/main.js:1:2200666)
    at _ZoneDelegate2.invoke (/Users/<path-to>/server/main.js:1:4048589)
    at Zone3.run (/Users/<path-to>/server/main.js:1:4040924)
    at /Users/<path-to>/server/main.js:1:4068136
    at _ZoneDelegate2.invokeTask (/Users/<path-to>/server/main.js:1:4049527)
    at Zone3.runTask (/Users/<path-to>/server/main.js:1:4042009)
    at drainMicroTaskQueue (/Users/<path-to>/server/main.js:1:4053298)

Edit: The server crashes with the error below when i do a second reload.

/Users/<path-to>/server/main.js:1
var __defProp=Object.defineProperty,__name=(target,value)=>__defProp(target,"name",{value,configurable:!0});(()=>{var __webpack_modules__={12560:(module2,__webpack_exports__2,__webpack_require__2)=>{"use strict";__webpack_require__2.r(__webpack_exports__2),__webpack_require__2.d(__webpack_exports__2,{AppServerModule:()=>AppServerModule,app:()=>app,renderModule:()=>renderModule,renderModuleFactory:()=>renderModuleFactory});var transports_namespaceObject={};__webpack_require__2.r(transports_namespaceObject),__webpack_require__2.d(transports_namespaceObject,{BaseTransport:()=>BaseTransport,HTTPSTransport:()=>HTTPSTransport,HTTPTransport:()=>HTTPTransport,makeNodeTransport:()=>makeNodeTransport});var integrations_namespaceObject={};__webpack_require__2.r(integrations_namespaceObject),__webpack_require__2.d(integrations_namespaceObject,{Console:()=>Console,ContextLines:()=>ContextLines,Http:()=>Http,LinkedErrors:()=>LinkedErrors,Modules:()=>Modules,OnUncaughtException:()=>OnUncaughtException,OnUnhandledRejection:()=>OnUnhandledRejection});var esm_integrations_namespaceObject={};__webpack_require__2.r(esm_integrations_namespaceObject),__webpack_require__2.d(esm_integrations_namespaceObject,{FunctionToString:()=>FunctionToString,InboundFilters:()=>InboundFilters});var handlers_namespaceObject={};__webpack_require__2.r(handlers_namespaceObject),__webpack_require__2.d(handlers_namespaceObject,{errorHandler:()=>errorHandler,extractRequestData:()=>extractRequestData,parseRequest:()=>parseRequest,requestHandler:()=>requestHandler,tracingHandler:()=>tracingHandler});var node_esm_namespaceObject={};__webpack_require__2.r(node_esm_namespaceObject),__webpack_require__2.d(node_esm_namespaceObject,{Handlers:()=>handlers_namespaceObject,Hub:()=>Hub,Integrations:()=>INTEGRATIONS,NodeBackend:()=>NodeBackend,NodeClient:()=>NodeClient,SDK_NAME:()=>SDK_NAME,SDK_VERSION:()=>SDK_VERSION,Scope:()=>scope_Scope,Session:()=>Session,Severity:()=>Severity,Transports:()=>transports_namespaceObject,addBreadcrumb:()=>addBreadcrumb,addGlobalEventProcessor:()=>addGlobalEventProcessor,captureEvent:()=>captureEvent,captureException:()=>captureException,captureMessage:()=>captureMessage,close:()=>sdk_close,configureScope:()=>configureScope,deepReadDirSync:()=>deepReadDirSync,defaultIntegrations:()=>defaultIntegrations,flush:()=>flush,getCurrentHub:()=>getCurrentHub,getHubFromCarrier:()=>getHubFromCarrier,getSentryRelease:()=>getSentryRelease,init:()=>init,lastEventId:()=>lastEventId,makeMain:()=>makeMain,setContext:()=>setContext,setExtra:()=>setExtra,setExtras:()=>setExtras,setTag:()=>setTag,setTags:()=>setTags,setUser:()=>setUser,startTransaction:()=>startTransaction,withScope:()=>withScope});var integrations_namespaceObject_0={};__webpack_require__2.r(integrations_namespaceObject_0),__webpack_require__2.d(integrations_namespaceObject_0,{FunctionToString:()=>functiontostring_FunctionToString,InboundFilters:()=>inboundfilters_InboundFilters});var browser_esm_integrations_namespaceObject={};__webpack_require__2.r(browser_esm_integrations_namespaceObject),__webpack_require__2.d(browser_esm_integrations_namespaceObject,{Breadcrumbs:()=>Breadcrumbs,Dedupe:()=>Dedupe,GlobalHandlers:()=>GlobalHandlers,LinkedErrors:()=>linkederrors_LinkedErrors,TryCatch:()=>TryCatch,UserAgent:()=>UserAgent});var esm_transports_namespaceObject={};__webpack_require__2.r(esm_transports_namespaceObject),__webpack_require__2.d(esm_transports_namespaceObject,{BaseTransport:()=>base_BaseTransport,FetchTransport:()=>FetchTransport,XHRTransport:()=>XHRTransport,makeNewFetchTransport:()=>makeNewFetchTransport,makeNewXHRTransport:()=>makeNewXHRTransport});var browser_esm_namespaceObject={};__webpack_require__2.r(browser_esm_namespaceObject),__webpack_require__2.d(browser_esm_namespaceObject,{BrowserClient:()=>BrowserClient,Hub:()=>hub_Hub,Integrations:()=>esm_INTEGRATIONS,SDK_NAME:()=>version_SDK_NAME,SDK_VERSION:()=>version_SDK_VERSION,Scope:()=>scope_Scope_0,Session:()=>session_Session,Severity:()=>severity_Severity,Transports:()=>esm_transports_namespaceObject,addBreadcrumb:()=>minimal_addBreadcrumb,addGlobalEventProcessor:()=>scope_addGlobalEventProcessor,captureEvent:()=>minimal_captureEvent,captureException:()=>minimal_captureException,captureMessage:()=>minimal_captureMessage,close:()=>esm_sdk_close,configureScope:()=>minimal_configureScope,defaultIntegrations:()=>sdk_defaultIntegrations,eventFromException:()=>eventFromException,eventFromMessage:()=>eventbuilder_eventFromMessage,flush:()=>sdk_flush,forceLoad:()=>forceLoad,getCurrentHub:()=>hub_getCurrentHub,getHubFromCarrier:()=>hub_getHubFromCarrier,init:()=>sdk_init,injectReportDialog:()=>injectReportDialog,lastEventId:()=>sdk_lastEventId,makeMain:()=>hub_makeMain,onLoad:()=>onLoad,setContext:()=>minimal_setContext,setExtra:()=>minimal_setExtra,setExtras:()=>minimal_setExtras,setTag:()=>minimal_setTag,setTags:()=>minimal_setTags,setUser:()=>minimal_setUser,showReportDialog:()=>showReportDialog,startTransaction:()=>minimal_startTransaction,withScope:()=>minimal_withScope,wrap:()=>sdk_wrap});__webpack_require__2(97584);var TagContentType,TagContentType2,tslib_es6=__webpack_require__2(70655);function splitNsName(elementName){if(":"!=elementName[0])return[null,elementName];const colonIndex=elementName.indexOf(":",1);if(-1===colonIndex)throw new Error(`Unsupported format "${elementName}" expecting ":namespace:name"`);return[elementName.slice(1,colonIndex),elementName.slice(colonIndex+1)]}function isNgContainer(tagName){return"ng-container"===splitNsName(tagName)[1]}function isNgContent(tagName){return"ng-content"===splitNsName(tagName)[1]}function isNgTemplate(tagName){return"ng-template"===splitNsName(tagName)[1]}function getNsPrefix(fullName){return null===fullName?null:splitNsName(fullName)[0]}function mergeNsAndName(prefix,localName){return prefix?`:${prefix}:${localName}`:localName}(TagContentType2=TagContentType||(TagContentType={}))[TagContentType2.RAW_TEXT=0]="RAW_TEXT",TagContentType2[TagContentType2.ESCAPABLE_RAW_TEXT=1]="ESCAPABLE_RAW_TEXT",TagContentType2[TagContentType2.PARSABLE_DATA=2]="PARSABLE_DATA",__name(splitNsName,"splitNsName"),__name(isNgContainer,"isNgContainer"),__name(isNgContent,"isNgContent"),__name(isNgTemplate,"isNgTemplate"),__name(getNsPrefix,"getNsPrefix"),__name(mergeNsAndName,"mergeNsAndName");class HtmlTagDefinition{constructor({closedByChildren,implicitNamespacePrefix,contentType=TagContentType.PARSABLE_DATA,closedByParent=!1,isVoid=!1,ignoreFirstLf=!1,preventNamespaceInheritance=!1}={}){this.closedByChildren={},this.closedByParent=!1,this.canSelfClose=!1,closedByChildren&&closedByChildren.length>0&&closedByChildren.forEach(tagName=>this.closedByChildren[tagName]=!0),this.isVoid=isVoid,this.closedByParent=closedByParent||isVoid,this.implicitNamespacePrefix=implicitNamespacePrefix||null,this.contentType=contentType,this.ignoreFirstLf=ignoreFirstLf,this.preventNamespaceInheritance=preventNamespaceInheritance}isClosedByChild(name){return this.isVoid||name.toLowerCase()in this.closedByChildren}getContentType(prefix){if("object"==typeof this.contentType){const overrideType=void 0===prefix?void 0:this.contentType[prefix];return null!=overrideType?overrideType:this.contentType.default}return this.contentType}}let _DEFAULT_TAG_DEFINITION,TAG_DEFINITIONS;function getHtmlTagDefinition(tagName){var _a,_b;return TAG_DEFINITIONS||(_DEFAULT_TAG_DEFINITION=new HtmlTagDefinition,TAG_DEFINITIONS={base:new HtmlTagDefinition({isVoid:!0}),meta:new HtmlTagDefinition({isVoid:!0}),area:new HtmlTagDefinition({isVoid:!0}),embed:new HtmlTagDefinition({isVoid:!0}),link:new HtmlTagDefinition({isVoid:!0}),img:new HtmlTagDefinition({isVoid:!0}),input:new HtmlTagDefinition({isVoid:!0}),param:new HtmlTagDefinition({isVoid:!0}),hr:new HtmlTagDefinition({isVoid:!0}),br:new HtmlTagDefinition({isVoid:!0}),source:new HtmlTagDefinition({isVoid:!0}),track:new HtmlTagDefinition({isVoid:!0}),wbr:new HtmlTagDefinition({isVoid:!0}),p:new HtmlTagDefinition({closedByChildren:["address","article","aside","blockquote","div","dl","fieldset","footer","form","h1","h2","h3","h4","h5"
A server error has occurred.
node exited with 1 code.

score 0 · Answer 1 · answered Oct 02 '22 at 17:26

I suspect this is a symptom of client side routing, which is typical of Single Page Applications (SPAs). As you navigate through your working application, you see your address bar entries change. But those are not URLs being requested from your Express server. Rather, your Angular framework is intercepting the request and invoking the JavaScript you packaged with your application.

The only "legitimate" URL for your application would be the one that initially loads your application. Everything you see in the address bar afterwards is recognized by your Angular router, but not by your Express server.

Why does navigating to a route work, but when i put that URL into the address bar (Or reload page after navigating to it) express server returns error

1 Answers1