angular ssr - Angular19 with SSR, the page render component from router and with home component. Means always two component in o

My Netflix clone project uses Angular19 with SSR, the view always renders a component from Router and a home component. Means always two component on one page.

in my angular19 project, with the router-outlet and with ssr, my appponent.html as follows,

 <main #mainContent>
   <router-outlet></router-outlet>
 </main>

by default, the root redirect to home page,

 {
    path: '',     
    redirectTo: 'home',     
    pathMatch: 'full',     
    data: { renderingMode: 'ssr' }   
 }

but my page renders two home component. then, when I navigate to another component (movies component), my page renders the movies component, and the home component is still there.

1. I have only one <router-outlet> in appponent.html
2. my project is angular 19 with all standalone components, so the main.ts only has one bootstrapApplication function.
3. I added 'home created' in ngOnInit in Home component, in browser it consoles only once, but in the node env, it angular CLI console shows it two times, I think it is because the SSR
4. using provideClientHydration() in ApplicationConfig

here is my ApplicationConfig:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withFetch(),
      withInterceptors([authInterceptor, errorFnInterceptor]),
    ),
    provideRouter(routes),
    provideAnimations(),
    provideClientHydration(),

    importProvidersFrom(
      CoreModule.forRoot(),
      LoggerModule.forRoot({
        serverLoggingUrl: '/api/logs',
        level: NgxLoggerLevel.DEBUG,
        serverLogLevel: NgxLoggerLevel.ERROR,
      }),
    ),
    provideAnimationsAsync(),
  ],
};

this is my routes object:

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
    data: { renderingMode: 'ssr' },
  },
  {
    path: 'home',
    loadComponent: () =>
      import('./pages/home/homeponent').then((c) => c.HomeComponent),
    loadChildren: () => [
       { path: '', component: HomeComponent }
    ],
    data: { renderingMode: 'ssr' },
  },
  ...

  {
    path: '**',
    loadComponent: () =>
      import('./pages/page-not-found/page-not-foundponent').then(
        (c) => c.PageNotFoundComponent,
      ),
    loadChildren: () => [
       { path: '', component: PageNotFoundComponent }
    ];,
  },
];

I check the inspect tool in chrome, seems the app-root render two times
enter image description here

By the way, I have a stable version in another branch with Angular18 SSR, it worked as expected, my angular19 project should as angular18, but why it not work after I upgraded to Angular19??