Server: relative URLs are not converted to absolute URLs #51626

KostyaTretyak · 2020-09-03T18:08:51Z

🐞 Bug report

What modules are related to this issue?

Description

Actually, this is a copy angular/universal#1669 and angular/universal#1747, but since they locked, I created this issue. Please do not close this issue for the third time. Let's wait until it is really fixed.

According to the documentation, @nguniversal/express-engine should take care of converting relative URLs to absolute ones. In this example need converting /api/heroes to http://localhost:4000/api/heroes, but it doesn't seem to be happening.

🔬 Minimal Reproduction

From first terminal:

git clone git@github.com:KostyaTretyak/example-universal-issue.git
cd example-universal-issue
yarn
yarn dev:ssr

See which port the previous command started on, suppose this is port 4200, and from second terminal:

curl -isS localhost:4200/heroes

🔥 Exception or Error

Error trace


ERROR Error: Uncaught (in promise): Error
Error
    at XMLHttpRequest.send (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:58831:19)
    at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:128552:17)
    at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
    at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
    at scheduleTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42838:32)
    at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42876:13)
    at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
    at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
    at innerSubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:145075:23)
    at MergeMapSubscriber._innerSub (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:39945:105)
    at resolvePromise (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:65088:39)
    at resolvePromise (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:65040:21)
    at /srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:65150:21
    at ZoneDelegate.crGB.ZoneDelegate.invokeTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:64677:35)
    at Object.onInvokeTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:97388:33)
    at ZoneDelegate.crGB.ZoneDelegate.invokeTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:64676:40)
    at Zone.crGB.Zone.runTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:64444:51)
    at drainMicroTaskQueue (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:64857:39)
    at crGB.ZoneTask.invokeTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:64763:25)
    at Server.ZoneTask.invoke (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:64748:52) {
  rejection: NetworkError
      at XMLHttpRequest.send (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:58831:19)
      at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:128552:17)
      at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
      at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
      at scheduleTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42838:32)
      at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42876:13)
      at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
      at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
      at innerSubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:145075:23)
      at MergeMapSubscriber._innerSub (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:39945:105),
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: NetworkError
        at XMLHttpRequest.send (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:58831:19)
        at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:128552:17)
        at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
        at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
        at scheduleTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42838:32)
        at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42876:13)
        at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
        at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
        at innerSubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:145075:23)
        at MergeMapSubscriber._innerSub (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:39945:105)
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true, maybeDelayChangeDetection: false },
    _zoneDelegate: ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: 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: NetworkError
          at XMLHttpRequest.send (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:58831:19)
          at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:128552:17)
          at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
          at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
          at scheduleTask (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42838:32)
          at Observable._subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:42876:13)
          at Observable._trySubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46117:25)
          at Observable.subscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:46103:22)
          at innerSubscribe (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:145075:23)
          at MergeMapSubscriber._innerSub (/srv/git/angular/test-universal-issue/dist/test-universal-issue/server/main.js:39945:105)
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}

🌍 Your Environment


Angular CLI: 10.1.0
Node: 12.18.3
OS: linux x64

Angular: 10.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1001.0
@angular-devkit/build-angular     0.1001.0
@angular-devkit/build-optimizer   0.1001.0
@angular-devkit/build-webpack     0.1001.0
@angular-devkit/core              10.1.0
@angular-devkit/schematics        10.1.0
@ngtools/webpack                  10.1.0
@nguniversal/builders             10.1.0
@nguniversal/common               10.1.0
@nguniversal/express-engine       10.1.0
@schematics/angular               10.1.0
@schematics/update                0.1001.0
rxjs                              6.6.2
typescript                        3.9.5
webpack                           4.44.1

The text was updated successfully, but these errors were encountered:

KostyaTretyak · 2020-09-03T18:10:18Z

If you want to check correctness of work this project without SSR:

From first terminal:

ng run test-universal-issue:server
node dist/test-universal-issue/server/main.js

From second terminal:

yarn start

Then go to the browser with http://localhost:4200/heroes

KostyaTretyak · 2020-09-11T14:45:11Z

why do you need to replace the absolute url's to relative ones at all

Where did I say that?

maqlec · 2021-10-06T12:27:27Z

Its still happening in universal@12.

robisim74 · 2021-11-08T18:22:00Z

Following the investigation of @alexjavier15 I was able to solve the problem by setting the useAbsoluteUrl parameter of PlatformConfig in app.server.module.ts file:

export class AppServerModule {
    constructor(@Inject(INITIAL_CONFIG) private config: PlatformConfig) {
        this.config.useAbsoluteUrl = true;
    }
}

@CaerusKaru Absolute urls work, but apparently that parameter is not set in any @nguniversal package and relative urls are not converted by default, as is claimed in the documentation.

maqlec · 2021-11-15T08:13:33Z

@robisim74 that workaround works perfectly but I think it should be enabled by default in universal engine.

peturh · 2021-11-18T17:16:41Z

So happy I found this thread also, I thought it was wierd that we still many years after release had to server side intercept urls.

https://angular.io/guide/universal#using-absolute-urls-for-http-data-requests-on-the-server

Clearly states

If you are using one of the @nguniversal/*-engine packages (such as @nguniversal/express-engine), this is taken care for you automatically. You don't need to do anything to make relative URLs work on the server.

These docs have to be updated.

@robisim74 fixes this for us

mbaquerizo · 2021-12-17T17:43:00Z

+1 to @peturh comment above.

Also want to point out that the docs go on to say that we can pass the full request url to renderModule() if @nguniversal/express-engine isn't used but don't really give direction or example on where to do this:

The recommended solution is to pass the full request URL to the options argument of renderModule() or renderModuleFactory() (depending on what you use to render AppServerModule on the server).

The boilerplate example only exports renderModule and renderModuleFactory, I don't see them being used anywhere.

seeplusplus · 2023-10-02T00:36:38Z

Following the investigation of @alexjavier15 I was able to solve the problem by setting the useAbsoluteUrl parameter of PlatformConfig in app.server.module.ts file:
export class AppServerModule {
    constructor(@Inject(INITIAL_CONFIG) private config: PlatformConfig) {
        this.config.useAbsoluteUrl = true;
    }
}
@CaerusKaru Absolute urls work, but apparently that parameter is not set in any @nguniversal package and relative urls are not converted by default, as is claimed in the documentation.

This fix no longer seems to work in Angular 17, which no longer bootstraps with an AppServerModule. Trying to @Inject(INITIAL_CONFIG) in the AppComponent results in:

✘ [ERROR] Could not resolve "url"

    node_modules/@angular/platform-server/fesm2022/platform-server.mjs:14:21:
      14 │ import * as url from 'url';
         ╵                      ~~~~~

  The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Prior to this commit relative HTTP requests were not being resolved to absolute even thought the behaviour is documented in https://angular.io/guide/universal#using-absolute-urls-for-http-data-requests-on-the-server. This caused relative HTTP requests to fail when done on the server because of missing request context. This change is also required to eventually support HTTP requests handled during prerendering (SSG). Closes angular#51626

Prior to this commit relative HTTP requests were not being resolved to absolute even thought the behaviour is documented in https://angular.io/guide/universal#using-absolute-urls-for-http-data-requests-on-the-server. This caused relative HTTP requests to fail when done on the server because of missing request context. This change is also required to eventually support HTTP requests handled during prerendering (SSG). Closes #51626 PR Close #52326

angular-automatic-lock-bot · 2023-11-23T00:09:02Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Prior to this commit relative HTTP requests were not being resolved to absolute even thought the behaviour is documented in https://angular.io/guide/universal#using-absolute-urls-for-http-data-requests-on-the-server. This caused relative HTTP requests to fail when done on the server because of missing request context. This change is also required to eventually support HTTP requests handled during prerendering (SSG). Closes angular#51626 PR Close angular#52326

alan-agius4 added area: common Issues related to APIs in the @angular/common package type: bug/fix labels Sep 8, 2020

alan-agius4 mentioned this issue Feb 13, 2021

Relative URLs are not converted to absolute URLs in angular universal. angular/universal#1994

Closed

5 tasks

alan-agius4 assigned CaerusKaru and alan-agius4 Feb 13, 2021

This comment was marked as off-topic.

Sign in to view

Yberion mentioned this issue Feb 3, 2023

🐞 ERROR NetworkError with the proxy + ssr-dev-server angular/universal#3009

Closed

3 tasks

This comment was marked as outdated.

Sign in to view

alan-agius4 marked this as a duplicate of #50412 Sep 1, 2023

alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Sep 1, 2023

This comment was marked as outdated.

Sign in to view

alan-agius4 unassigned alan-agius4 and CaerusKaru Sep 1, 2023

alan-agius4 removed area: common Issues related to APIs in the @angular/common package type: bug/fix labels Sep 1, 2023

alan-agius4 reopened this Sep 1, 2023

alan-agius4 transferred this issue from angular/universal Sep 1, 2023

alan-agius4 changed the title ~~bug(express-engine): relative URLs are not converted to absolute URLs~~ Server: relative URLs are not converted to absolute URLs Sep 1, 2023

alan-agius4 added area: core Issues related to the framework runtime area: server Issues related to server-side rendering labels Sep 1, 2023

ngbot bot modified the milestone: needsTriage Sep 1, 2023

alan-agius4 added area: common/http and removed area: core Issues related to the framework runtime labels Sep 1, 2023

alan-agius4 mentioned this issue Sep 1, 2023

Angular Universal do not use absolute url to make api calls #50412

Closed

3 tasks

alaendle added a commit to alaendle/meta-framework-playground that referenced this issue Oct 22, 2023

With fixed URLs caching is working (but angular/angular#51626).

5728daa

alan-agius4 mentioned this issue Oct 23, 2023

fix(platform-server): resolve relative requests URL #52326

Closed

dylhunn closed this as completed in 405ec8c Oct 23, 2023

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server: relative URLs are not converted to absolute URLs #51626

Server: relative URLs are not converted to absolute URLs #51626

KostyaTretyak commented Sep 3, 2020 •

edited

KostyaTretyak commented Sep 3, 2020

KostyaTretyak commented Sep 11, 2020

This comment was marked as off-topic.

maqlec commented Oct 6, 2021

robisim74 commented Nov 8, 2021

maqlec commented Nov 15, 2021

peturh commented Nov 18, 2021 •

edited

mbaquerizo commented Dec 17, 2021

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

seeplusplus commented Oct 2, 2023 •

edited

angular-automatic-lock-bot bot commented Nov 23, 2023

Server: relative URLs are not converted to absolute URLs #51626

Server: relative URLs are not converted to absolute URLs #51626

Comments

KostyaTretyak commented Sep 3, 2020 • edited

🐞 Bug report

What modules are related to this issue?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

KostyaTretyak commented Sep 3, 2020

KostyaTretyak commented Sep 11, 2020

This comment was marked as off-topic.

maqlec commented Oct 6, 2021

robisim74 commented Nov 8, 2021

maqlec commented Nov 15, 2021

peturh commented Nov 18, 2021 • edited

mbaquerizo commented Dec 17, 2021

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

seeplusplus commented Oct 2, 2023 • edited

angular-automatic-lock-bot bot commented Nov 23, 2023

KostyaTretyak commented Sep 3, 2020 •

edited

peturh commented Nov 18, 2021 •

edited

seeplusplus commented Oct 2, 2023 •

edited