Angular 17, Standalone with @angular/ssr and Ionic 7.6.0, looks different on client that on server

Hello, I´ve been trying to integrate angular standalone ssr with Ionic, but the resultant code on server destroy shadow parts.

This is my angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {
        "@ionic/angular-toolkit:page": {
          "styleext": "scss",
          "standalone": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/app",
            "index": "src/index.html",
            "polyfills": [
              "src/polyfills.ts"
            ],
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [{
              "glob": "**/*",
              "input": "src/assets",
              "output": "assets"
            }],
            "styles": [
              "src/theme/variables.scss",
              "src/global.scss"
            ],
            "externalDependencies": ["canvas"],
            "scripts": [],
            "prerender": false,
            "server": "src/main.server.ts",
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [{
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "12kb"
                }
              ],
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            },
            "ci": {
              "progress": false
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "app:build:production"
            },
            "development": {
              "buildTarget": "app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [{
              "glob": "**/*",
              "input": "src/assets",
              "output": "assets"
            }],
            "styles": [
              "src/theme/variables.scss",
              "src/global.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "version": 2,
            "prerender": false,
            "buildTarget": "app:build:production",
            "functionsRuntimeOptions": {
              "memory": "128MB",
              "timeoutSeconds": 10,
              "maxInstances": 3,
              "minInstances": 0
            }
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@ionic/angular-toolkit"
    ],
    "analytics": "6f4fd7d6-33a5-491c-8a1b-1ea861963393"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    },
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  }
}

This is my package.json file:

{
  "name": "food-journey",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "dev:ssr": "ng run app:serve-ssr",
    "serve:ssr": "node dist/app/server/main.js",
    "build:ssr": "ng build && ng run app:server",
    "prerender": "ng run app:prerender",
    "serve:ssr:tester": "node dist/app/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.1.0",
    "@angular/google-maps": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/platform-server": "^17.1.0",
    "@angular/router": "^17.1.0",
    "@angular/ssr": "^17.1.0",
    "@capacitor-community/apple-sign-in": "^5.0.0",
    "@capacitor/android": "5.6.0",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.6.0",
    "@capacitor/geolocation": "^5.0.6",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/ios": "5.6.0",
    "@capacitor/keyboard": "5.0.7",
    "@capacitor/network": "^5.0.6",
    "@capacitor/preferences": "^5.0.6",
    "@capacitor/splash-screen": "^5.0.6",
    "@capacitor/status-bar": "^5.0.6",
    "@codetrix-studio/capacitor-google-auth": "^3.3.6",
    "@ionic/angular": "^7.6.5",
    "@ionic/angular-server": "^7.6.3",
    "express": "^4.18.2",
    "ionicons": "^7.2.1",
    "moment-timezone": "^0.5.44",
    "ng2-pdf-viewer": "^10.0.0",
    "onesignal-cordova-plugin": "^5.0.4",
    "onesignal-ngx": "^2.0.1",
    "rxjs": "~7.8.0",
    "swiper": "^11.0.5",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.1.0",
    "@angular-eslint/builder": "^17.2.0",
    "@angular-eslint/eslint-plugin": "^17.2.0",
    "@angular-eslint/eslint-plugin-template": "^17.2.0",
    "@angular-eslint/schematics": "^17.2.0",
    "@angular-eslint/template-parser": "^17.2.0",
    "@angular/cli": "^17.1.0",
    "@angular/compiler-cli": "^17.1.0",
    "@angular/language-service": "^17.1.0",
    "@capacitor/cli": "5.6.0",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "browser-sync": "^3.0.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "ts-node": "^8.3.0",
    "typescript": "~5.2.2"
  },
  "description": "An Ionic project"
}

This is my app.config.s:

import { RouteReuseStrategy, TitleStrategy, provideRouter, withComponentInputBinding, withRouterConfig } from '@angular/router';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import { IonicRouteStrategy } from '@ionic/angular/common';
import { provideIonicAngular } from '@ionic/angular/standalone';
import { routes } from './app.routes';

import {
    ScreenTrackingService,
    UserTrackingService,
    getAnalytics,
    provideAnalytics,
} from '@angular/fire/analytics';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getPerformance, providePerformance } from '@angular/fire/performance';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { environment } from '../environments/environment';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideClientHydration } from '@angular/platform-browser';
// import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';


export const appConfig: ApplicationConfig = {
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        provideClientHydration(),
        provideIonicAngular({
            mode: "ios",
            backButtonText: "",
            backButtonIcon: "chevron-back",
        }),
        // provideClientHydration(withHttpTransferCacheOptions({ includePostRequests: false })),
        provideRouter(routes, withComponentInputBinding()),
        provideAnimations(),
        importProvidersFrom([
            provideFirebaseApp(() => initializeApp(environment.firebase)),
            provideAnalytics(() => getAnalytics()),
            provideAuth(() => getAuth()),
            provideFirestore(() => getFirestore()),
            providePerformance(() => getPerformance()),
            provideStorage(() => getStorage()),
        ]),
        provideHttpClient(),
        { provide: FIREBASE_OPTIONS, useValue: environment.firebase },
        ScreenTrackingService,
        UserTrackingService,

    ],
};

This is my app.config.server.ts:

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';

import { appConfig } from './app.config';
import { IonicServerModule } from '@ionic/angular-server';
import { provideServerRendering } from '@angular/platform-server';


const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    IonicServerModule,
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Please, could anyone can help me?

Sorry, I forgot to upload the screenshots for the difference:
Local:

On server: