`scrollOffset` option isn't available in Angular 17's new `bootstrapApplication` function
Asked Answered
C

1

5

I am unable to add a scrollOffset option to my Angular 17 bootstrap config.

Before Angular 17, you'd have an app module that imports a routing module as such:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabledBlocking',
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 100],
      preloadingStrategy: PreloadAllModules,
    }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In Angular 17, you now pass a config object to the bootstrapApplication function, and I am unable to find a way to add the scrollOffset config as before (see above):

// main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { withInMemoryScrolling } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled',
      }),
      // Where can I put my scrollOffset???
    ),
  ],
};
Crotchety answered 16/11, 2023 at 21:18 Comment(0)
D
6

It is intentional that scrollOffset as removed when building the standalone API because the option is a duplicate of what's already available in ViewportScroller. Instead, call you should call ViewportScroller.setOffset().

Divers answered 16/11, 2023 at 22:47 Comment(2)
Hmm, so that means I have to set my offset every single time I go to an anchor.Crotchety
@JustinLedoux You can just setOffset once in your bootstraped component: export class AppComponent { constructor( viewport: ViewportScroller ) { viewport.setOffset(scrollOffset: [0, 100]) } }Jinx

© 2022 - 2024 — McMap. All rights reserved.