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?
