Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(common): server-side rendering error when using in-memory scrolling #53683

Closed
wants to merge 1 commit into from

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Dec 22, 2023

Fixes that the BrowserViewportScroller was throwing an error during server-side rendering because it was accessing window directly. Also removes some assertions that aren't necessary anymore.

Fixes #53682.

@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: common Issues related to APIs in the @angular/common package target: patch This PR is targeted for the next patch release labels Dec 22, 2023
@ngbot ngbot bot modified the milestone: Backlog Dec 22, 2023
@alan-agius4
Copy link
Contributor

Shouldn't actually withInMemoryScrolling be nooped instead when platform is server by returning null? I don't see why this feature should be even enabled for non browser platforms.

https://github.com/angular/angular/blob/d315e2c4fa178dfbd41bc25259605bb999fa302e/packages/router/src/provide_router.ts#L183:L188

@crisbeto
Copy link
Member Author

In that case we would have to provide a noop implementation of the class. The current class already has all the necessary checks in place, the only missing one was in the factory.

@alan-agius4
Copy link
Contributor

@crisbeto, I don't quite see the necessity for creating a noop implementation. Since ROUTER_SCROLLER is an optional token, returning null is acceptable. You can find the relevant code

injector.get(ROUTER_SCROLLER, null, InjectFlags.Optional)?.init();

Therefore, the following code should be adequate. The advantage here is that it avoids the creation and subscription to unused router events and can also contribute to better future-proofing, preventing potential regressions if a feature isn't utilized in SSR.

const providers = [{
  provide: ROUTER_SCROLLER,
  useFactory: () => {
+    const platformId = inject(PLATFORM_ID);
+    if (!isPlatformBrowser(platformId)) {
+       return null;
+    }
+
    const viewportScroller = inject(ViewportScroller);
    const zone = inject(NgZone);
    const transitions = inject(NavigationTransitions);
    const urlSerializer = inject(UrlSerializer);
    return new RouterScroller(urlSerializer, transitions, viewportScroller, zone, options);
  },
}];

I'm not strongly attached to this suggestion, but I lean towards not enabling unnecessary features.

@crisbeto
Copy link
Member Author

crisbeto commented Dec 22, 2023

My concern was that this is still going to error if somebody tries to inject ViewportScroller. Since it's providedIn: 'root', it doesn't necessarily have to be provided by the router in order to be injectable. The other problem is that the ROUTER_SCROLLER doesn't know how it's going to be injected. E.g. currently the only place we use it's optional, but if another place injects it later on, it'll be misleading to return null. Currently it's typed as InjectionToken<RouterScroller>, not InjectionToken<RouterScroller|null>.

Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes angular#53682.
@crisbeto crisbeto 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 Dec 27, 2023
@atscott
Copy link
Contributor

atscott commented Jan 3, 2024

This PR was merged into the repository by commit dd052dc.

@atscott atscott closed this in dd052dc Jan 3, 2024
atscott pushed a commit that referenced this pull request Jan 3, 2024
…ng (#53683)

Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes #53682.

PR Close #53683
ChellappanRajan pushed a commit to ChellappanRajan/angular that referenced this pull request Jan 23, 2024
…ng (angular#53683)

Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes angular#53682.

PR Close angular#53683
rlmestre pushed a commit to rlmestre/angular that referenced this pull request Jan 26, 2024
…ng (angular#53683)

Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes angular#53682.

PR Close angular#53683
danieljancar pushed a commit to danieljancar/angular that referenced this pull request Jan 26, 2024
…ng (angular#53683)

Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes angular#53682.

PR Close angular#53683
amilamen pushed a commit to amilamen/angular that referenced this pull request Jan 26, 2024
…ng (angular#53683)

Fixes that the `BrowserViewportScroller` was throwing an error during server-side rendering because it was accessing `window` directly. Also removes some assertions that aren't necessary anymore.

Fixes angular#53682.

PR Close angular#53683
@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 Feb 3, 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 target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ERROR ReferenceError: window is not defined when using withInMemoryScrolling with SSR
3 participants