Skip to content

feat: support for Angular 18 SSR #30078

Closed

Description

@FawadNL

Prerequisites

Describe the Feature Request

Ionic Components are not yet compatible with Angular 18 SSR. Please add support for this angular version.

Describe the Use Case

Angular 18 SSR for SEO and better performance

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Activity

  1. Saqib92 commented on Jun 13, 2025

    @Saqib92

    no updates??

  2. julianpoy commented on Dec 27, 2025

    @julianpoy

    Also blocked on this

  3. thetaPC commented on Oct 1, 2026

    @thetaPC
    Contributor

    Thanks for the report, and sorry for the delay.

    This should be fixed in 8.8.15. In the Ionic versions available when this was filed, @ionic/angular-server crashed on every server render with attachShadow is not a function, because Angular's server DOM doesn't implement Shadow DOM, so Ionic components were sent to the browser unrendered. #30967 fixed this by having the server module detect the missing API and fall back to scoped rendering. It shipped in v8.8.15.

    One setup detail: as noted in #28625, Ionic does not support Angular's client hydration (provideClientHydration()), which ng new --ssr adds by default. Leaving it on throws NG0500 in development builds and hasAttribute is not a function in production builds. Either remove provideClientHydration(), or skip hydration for the Ionic tree:

    // app.config.server.ts
    import { mergeApplicationConfig, ApplicationConfig, importProvidersFrom } from '@angular/core';
    import { provideServerRendering } from '@angular/platform-server';
    import { IonicServerModule } from '@ionic/angular-server';
    import { appConfig } from './app.config';
    
    const serverConfig: ApplicationConfig = {
      providers: [provideServerRendering(), importProvidersFrom(IonicServerModule)],
    };
    
    export const config = mergeApplicationConfig(appConfig, serverConfig);
    <ion-app ngSkipHydration>
      <!-- your app -->
    </ion-app>

    Could someone who was blocked on this confirm that it works in your app on the latest version?

  4. ionitron-bot commented on Oct 15, 2026

    @ionitron-bot

    Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

    Thank you for using Ionic!

  5. locked and limited conversation to collaborators on Oct 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: replythe issue needs a response from the user

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions