app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import { HomeComponent } from './cellx-page-module/home-page-component/home.component';
import { PublicFitsViewComponent } from './cellx-page-module/fit-search-pages-components/fit-pages/public-view-component/public-view.component';
import { AdminFitsViewComponent } from './cellx-page-module/fit-search-pages-components/fit-pages/admin-view-component/admin-view.component';
import { FitsDetailComponent } from './cellx-page-module/fit-detail-page-components/fits-detail.component';
import { LoginComponent } from './cellx-page-module/login-component/login.component';
import { HelpComponent } from './cellx-page-module/help-component/help.component';
import { LogoutComponent } from './cellx-page-module/logout-component/logout.component';
import { GroupFitsViewComponent } from './cellx-page-module/fit-search-pages-components/fit-pages/group-fits-component/group-fits.component';
import { StudyFitsViewComponent } from './cellx-page-module/fit-search-pages-components/fit-pages/study-fits-component/study-fits.component';
import { AccessibleFitsViewComponent } from './cellx-page-module/fit-search-pages-components/fit-pages/accessible-fits-component/accessible-fits.component';
import { AdvancedSearchFormComponent } from './cellx-page-module/advanced-search-components/advanced-search-form/advanced-search-form.component';
import { AdvancedSearchPageComponent } from './cellx-page-module/advanced-search-components/advanced-search-page/advanced-search-page.component';
import { ChangelogComponent } from './cellx-page-module/changelog-component/changelog.component';
import { NotfoundComponent } from './cellx-page-module/notfound-component/notfound.component';
import { ErrorComponent } from './cellx-page-module/error-component/error.component';
import { ProboundComponent } from './cellx-page-module/probound-component/probound.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'logout', component: LogoutComponent },
  { path: 'signup', component: LoginComponent },
  { path: 'changelog', component: ChangelogComponent },
  { path: 'probound', component: ProboundComponent },
  { path: 'publicfits', component: PublicFitsViewComponent },
  { path: 'adminfits', component: AdminFitsViewComponent },
  { path: 'groupfits/:labId', component: GroupFitsViewComponent },
  { path: 'studyfits/:studyName', component: StudyFitsViewComponent },
  { path: 'accessiblefits', component: AccessibleFitsViewComponent },
  { path: 'fit/:fit_id', component: FitsDetailComponent },
  { path: 'help', component: HelpComponent },
  { path: 'searchform', component: AdvancedSearchFormComponent },
  { path: 'searchresults', component: AdvancedSearchPageComponent },
  { path: 'error', component: ErrorComponent },
  {path: '404', component: NotfoundComponent},
  {path: '**', redirectTo: '/404'}
];

const routerOptions: ExtraOptions = {
  scrollPositionRestoration: 'enabled', // or 'top'
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64] // [x, y] - adjust scroll offset
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})
export class AppRoutingModule { }