Adding SSR support to Ionic 7 and Angular 17

Before starting, make sure your project is not a standalone project

1.Install @angular/ssr and @ionic/angular-server

Open terminal and goto the path of project root. Input the following command for installing @angular/localize

ng add @angular/ssr

This command will prompt you as follows and ask whether you want to continue installing @angular/ssr, which is compatible with your version of Angular. Anyway, don’t rush into entering ‘Y’ to continue the process.”

✔ Found compatible package version: @angular/ssr@17.3.5.
✔ Package information loaded.

The package @angular/ssr@17.3.5 will be installed and executed.
Would you like to proceed? (Y/n) 

Before continuing with the process to install @angular/ssr, you should check and upgrade @angular/cli and other related packages to version 17.3.5 to ensure they match the suggested version for @angular/ssr.

2. Import provideHttpClient

Add the following code to app.module.ts.

import { provideHttpClient, withFetch } from '@angular/common/http';//Add this line

@NgModule({
  providers: [
    provideHttpClient(withFetch()), //Add this line
    ....,
    ....
  ]
})

export class AppModule {}

3. Disable Hydration

Unfortunately, the @angular/ssr module in Angular v17 does not support web components, and there are many unresolved issues with Hydration. We need to disable Hydration by commenting out or removing provideClientHydration() in app.module.ts. Although this means losing the benefits of Hydration, we can still enjoy the SEO advantages provided by Server-Side Rendering (SSR).

@NgModule({
  providers: [
    ...., 
    ....,
    //provideClientHydration()
  ]
})
export class AppModule {}

4. Run SSR for the first time

After @angular/ssr has been successfully installed, you can run the following command to start building your SSR project in development mode:

npm run dev:ssr

If your project is not a blank project, there might be some errors. You should fix those issues first. Below, I provide some tips to fix errors when running the build command.

• You should remove any plugins that use browser-native commands like ‘window’.

5. Rendering HTML on the server-side

After you have solved the issues in the previous step, you should now see your project running successfully in the browser. However, we need to do one more thing to ensure the server returns an HTML page with HTML elements and rendered Ionic components like ion-button.

Use this command to install @ionic/angular-server@7 in your Ionic 7 project. Please note that you shouldn’t install the latest version of @ionic/angular-server. Otherwise, some Ionic components may not render properly on the server-side.

npm i @ionic/angular-server@7 --force

After the installation is successful, we should now import IonicServerModule into app.module.server.ts as follows.

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { IonicServerModule } from '@ionic/angular-server'; //Add this line

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    IonicServerModule //Add this line
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

6. Run SSR again

Everything should be done now. Build your project again, and you should see the rendered HTML page that is returned from the server on the first load.

npm run dev:ssr