What is @angular/platform-server?
@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
next
Next.js is a React framework that enables server-side rendering and static site generation. It provides a similar SSR functionality to @angular/platform-server but is designed for React applications. It also includes features like API routes, automatic code splitting, and more.
nuxt
Nuxt.js is a framework for Vue.js that enables server-side rendering and static site generation. It offers similar SSR capabilities to @angular/platform-server but is tailored for Vue.js applications. Nuxt.js also provides features like automatic routing, Vuex store integration, and more.
sapper
Sapper is a framework for Svelte that provides server-side rendering and other advanced features. It offers similar SSR functionality to @angular/platform-server but is designed for Svelte applications. Sapper also includes features like file-based routing and prefetching.
18.1.0 (2024-07-10)
common
| Commit | Type | Description |
| -- | -- | -- |
| f25653e231 | fix | typo in NgOptimizedImage warning (#56756) |
| 9b35726e42 | fix | typo in warning for NgOptimizedDirective (#56817) |
compiler
| Commit | Type | Description |
| -- | -- | -- |
| fd6cd0422d | feat | Add extended diagnostic to warn when there are uncalled functions in event bindings (#56295) |
| 341a116d61 | fix | allow more characters in let declaration name (#56764) |
| 2a1291e942 | fix | give precedence to local let declarations over parent ones (#56752) |
compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| 66e582551e | fix | avoid duplicate diagnostics for let declarations read before definition (#56843) |
| 4d18c5bfd5 | fix | flag all conflicts between let declarations and local symbols (#56752) |
| 9e21582456 | fix | Show template syntax errors in local compilation modified (#55855) |
| 5996502921 | fix | type check let declarations nested inside nodes (#56752) |
| cdebf751e4 | fix | used before declared diagnostic not firing for control flow blocks (#56843) |
core
| Commit | Type | Description |
| -- | -- | -- |
| ea3c802056 | feat | Add a schematic to migrate afterRender phase flag (#55648) |
| 5df3e78c99 | feat | add equality function to rxjs-interop toSignal
(#56447) |
| 0a48d584f2 | feat | add support for let syntax (#56715) |
| 352e0782ec | feat | expose signal input metadata in ComponentMirror
(#56402) |
| a655e46447 | feat | Redesign the afterRender
& afterNextRender
phases API (#55648) |
| e5a6f91722 | feat | support TypeScript 5.5 (#56096) |
| 38effcc63e | fix | Add back phase flag option as a deprecated API (#55648) |
| 86bcfd3e49 | fix | improve docs on afterRender hooks (#56522) |
| b2445a0953 | fix | link errors to ADEV (#55554) (#56038) |
| 03a2acd2a3 | fix | properly remove imports in the afterRender phase migration (#56524) |
| 4d87b9e899 | fix | rename the equality function option in toSignal (#56769) (#56922) |
| 8bd4c074af | fix | toSignal equal option should be passed to inner computed (#56903) |
forms
| Commit | Type | Description |
| -- | -- | -- |
| 00bde8b1c2 | fix | Make NgControlStatus
host bindings OnPush
compatible (#55720) |
http
| Commit | Type | Description |
| -- | -- | -- |
| cc21989132 | fix | Make Content-Type
header case insensitive (#56541) |
language-service
| Commit | Type | Description |
| -- | -- | -- |
| b400e2e4d4 | feat | autocompletion for the component not imported (#55595) |
| 67b2c336bc | fix | import the default exported component correctly (#56432) |
router
| Commit | Type | Description |
| -- | -- | -- |
| a13f5da773 | feat | Allow UrlTree
as an input to routerLink
(#56265) |
| 1d3a7529b4 | feat | Set a different browser URL from the one for route matching (#53318) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="18.0.7"></a>