i’m studing Angular rencentily and get stuck in a problem for about 2 days, in the beging in was stuck trying to call a route in Angular but after some research i fond a way to do it, but the awser that a obtain wasnt what i expected, the new component that i was calling was showed just after the previos one, after that a fund the lazy-loading and see outher codes in git hub, soo e noticed that people dont export the routes class insted uses the ngmodule and export the AppRoutingModule {}, to be honest i dont understand how this work, a try some times to get a better performance but i get a error in the app.config because this import are the routes class how now aren’t get exported, i know that my question is prettly confuising but here are the codes for better understendment:

app.routes

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeModule } from './home/home.module';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => HomeModule
  }
];

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

app.config

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: 
  [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), // <--- my problem is here
    provideClientHydration()
  ]
};

home.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

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

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})
export class HomeModule {}