Skip to content

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

Closed
crisbeto wants to merge 1 commit intoangular:mainfrom
crisbeto:53682/viewport-scroller-ssr
Closed

fix(common): server-side rendering error when using in-memory scrolling#53683
crisbeto wants to merge 1 commit intoangular:mainfrom
crisbeto:53682/viewport-scroller-ssr

Conversation

@crisbeto
Copy link
Copy Markdown
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
@crisbeto crisbeto requested a review from atscott December 22, 2023 10:48
@ngbot ngbot bot modified the milestone: Backlog Dec 22, 2023
@alan-agius4
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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>.

@crisbeto crisbeto force-pushed the 53682/viewport-scroller-ssr branch from ee1b89b to dbc8a41 Compare December 27, 2023 15:51
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 force-pushed the 53682/viewport-scroller-ssr branch from dbc8a41 to d7c5769 Compare December 27, 2023 15:53
@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
Copy Markdown
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
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
Copy Markdown

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