@angular/platform-server is an Angular package that enables server-side rendering (SSR) for Angular applications. It allows you to render Angular applications on the server, which can improve performance, SEO, and user experience by delivering fully rendered pages to the client.

What are @angular/platform-server's main functionalities?

Server-Side Rendering (SSR)

This feature allows you to render an Angular application on the server. The `renderModule` function takes an Angular module and renders it to a string, which can then be sent to the client.

const { renderModule } = require('@angular/platform-server');
const { AppServerModule } = require('./src/main.server');

renderModule(AppServerModule, {
  document: '<app-root></app-root>',
  url: '/'
}).then(html => {
  console.log(html);
});

Preboot

Preboot is a library that works with Angular Universal to record and playback user events while the client-side app is loading. This code sample demonstrates how to set up a global window and document object using the 'domino' library to enable Preboot.

const { renderModule } = require('@angular/platform-server');
const { AppServerModule } = require('./src/main.server');
const { createWindow } = require('domino');

const win = createWindow('<html><head></head><body><app-root></app-root></body></html>');
global['window'] = win;
global['document'] = win.document;

global['navigator'] = win.navigator;

renderModule(AppServerModule, {
  document: win.document,
  url: '/'
}).then(html => {
  console.log(html);
});

Transfer State

Transfer State allows you to transfer state from the server to the client, reducing the need for duplicate HTTP requests. This code sample shows how to import and use the ServerTransferStateModule in your server-side module.

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Other packages similar to @angular/platform-server

FAQs

What is @angular/platform-server?

Is @angular/platform-server popular?

Is @angular/platform-server well maintained?

Package last updated on 07 Aug 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install