Skip to content

Conversation

@JeanMeche
Copy link
Member

The window global is patched by domino on the server but the value of window.location.href isn't a valid base.

Before this change getUrl() would throw when running in devmode on the server.

Fixes #56207

@pullapprove pullapprove bot requested a review from AndrewKushnir June 1, 2024 11:18
@JeanMeche JeanMeche added common: image directive action: review The PR is still awaiting reviews from at least one requested reviewer labels Jun 1, 2024
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should just check if the current platform is server and exit in this case:

Suggested change
if (!this.window || this.isServer) return;
if (this.isServer) return;

I think that was the intention of the window-based check.

Copy link
Member Author

@JeanMeche JeanMeche Jun 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kept it because this.window is typed as Window | null, should we change the typing ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for additional information. In this case we can move this check to the constructor:

    if (!this.isServer && typeof win !== 'undefined') {
      this.window = win;
    }

So we set the window reference only when we are not on the server. What do you think?

Copy link
Contributor

@alan-agius4 alan-agius4 Jun 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JeanMeche, I understand you didn't originally work on this part, but there's an issue with how we're obtaining the base href, and it also highlights a couple of other issues.

  1. We're currently using the Window object, which is incorrect. Instead, we should be using the PlatformLocation service. This service will return the correct base when running on the server. When an absolute URL is provided, the PlatformLocation service handles it correctly.
  2. When a relative URL is provided in the server config, we're currently setting the base href to /, which is not valid, as you pointed out. This setting lacks a protocol and makes the href invalid.
    export function parseDocument(html: string, url = '/') {

Maybe the getURL function should be updated to use a base instead of a Window object:

export function getUrl(src: string, base: string): URL

This approach is essentially equivalent to using new URL(), because if src is absolute, new URL(src) yields the same result as new URL(src, win.location.href).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alan-agius4 quick question: the change is in this PR should make this service a noop on the server (only be invoked in a browser). Would you recommend changing the mentioned logic anyway?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that accessing the window global isn't great. I've refactored to use PlatformLocation.

@AndrewKushnir AndrewKushnir added target: patch This PR is targeted for the next patch release area: common Issues related to APIs in the @angular/common package labels Jun 2, 2024
@ngbot ngbot bot added this to the Backlog milestone Jun 2, 2024
Copy link
Contributor

@alan-agius4 alan-agius4 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, couple of minor nits.

@JeanMeche JeanMeche added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jun 25, 2024
@AndrewKushnir AndrewKushnir added the action: presubmit The PR is in need of a google3 presubmit label Jun 25, 2024
@AndrewKushnir
Copy link
Contributor

Presubmit.

@AndrewKushnir
Copy link
Contributor

Caretaker note: presubmit is "green" for the changes in this PR, this PR is ready for merge.

@AndrewKushnir AndrewKushnir removed the action: presubmit The PR is in need of a google3 presubmit label Jun 26, 2024
@thePunderWoman thePunderWoman added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Jun 27, 2024
thePunderWoman pushed a commit that referenced this pull request Jun 27, 2024
The `window` global is patched by domino on the server but the value of `window.location.href` isn't a valid base.

Before this change `getUrl()` would throw when running in devmode on the server.

Fixes #56207

PR Close #56213
@thePunderWoman
Copy link
Contributor

This PR was merged into the repository by commit 39e48ce.

The changes were merged into the following branches: main, 18.0.x

AndrewKushnir added a commit to AndrewKushnir/angular that referenced this pull request Jun 27, 2024
@AndrewKushnir
Copy link
Contributor

The change will be reverted via #56740, since there are some breakages in Google's codebase. The error looks like this:

TypeError: Failed to construct 'URL': Invalid base URL

    at getUrl (packages/common/src/directives/ng_optimized_image/url.ts:12
    at LCPImageObserver.registerImage (packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts:103
    at packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts:438
   ...

I think we may need to split this PR into 2:

  • one that would add a flag to stop running some code on the server (low risk)
  • additional refactoring to use platform location, etc (higher risk, would require a TGP)

@AndrewKushnir AndrewKushnir reopened this Jun 27, 2024
thePunderWoman pushed a commit that referenced this pull request Jun 27, 2024
thePunderWoman pushed a commit that referenced this pull request Jun 27, 2024
@thePunderWoman thePunderWoman removed the action: merge The PR is ready for merge by the caretaker label Jun 27, 2024
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 17, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: common Issues related to APIs in the @angular/common package common: image directive merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ERR_INVALID_URL thrown during prerendering ngSrc with priority attribute

5 participants