component is duplicated after Hydration

[vlio20]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

When using ssr with hydration my main component is not replaced immediately. It takes it about 4 seconds to go away. This is how it looks:

The top section is the one that is generated by the server and to one at the bottom is generated by the SPA. After few seconds the top component is removed and it looks like so:

when turning off hydration:

There is no duplication of components.

Please provide a link to a minimal reproduction of the bug

can share the application as it privte

Please provide the exception or error you saw

Here is my router:

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'main',
  },
  {
    path: 'main',
    component: MainComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'competitionGroups',
      },
      {
        path: 'competitionGroups',
        loadChildren: () => import('./sections/competition-group/competition-group.routing')
          .then((m) => m.routes),
      },

The main component is the one that is duplicated. Here it is code:

<oo-loading-container [status]="state.status">
    <ng-template>
        <oo-app-bar [isSuperAdmin]="state.isSupperAdmin"
                    [userImage]="state.initData!.user.image">
        </oo-app-bar>
        <div class="oo-page-container">
            <router-outlet></router-outlet>
        </div>
    </ng-template>
</oo-loading-container>

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 18.0.2
Node: 18.19.0
Package Manager: npm 10.2.3
OS: darwin arm64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/cli                    18.0.2
@angular/ssr                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else?

No response

[JeanMeche]

Hi, hydration issues are usally accompanied with errors logged in the console.

Also, could you try to provide a reproduction on a github repro. This would help understand the issue.

[vlio20]

Note that for other pages it doesn't necessary happen. There are no errors that I see in the logs. Not on the server and not in the browser?
Is there any way to enable verbose logs?

I don't think that there is a practical way to create a demo repo as this "MainComponent" making calls to my backend.

[thePunderWoman]

@vlio20 We don't need the exact code. We just need a minimal reproduction of the behavior. If you could take your code sans any sort of data and demonstrate the behavior in stackblitz, that'd suffice for us to look at it.

[vlio20]

Will try to think how to do it to mimic the original scenario...

[jsprw]

Is it the same issue as #50543?

[JeanMeche]

Without a reproduction we're going to close this issue. If you can provide a narrowed down repro, feel free to open a new issue, thank you.