Про Angular Universal & Server-side rendering
ng add @nguniversal/express-engine --clientProject <project-name>
npm run build:ssr && npm run serve:ssrПроблема с абсолютными импортами src/app/... решается удалением "baseUrl": "." в файле src\tsconfig.server.json. baseUrl должен наследоваться из ./tsconfig.app.json или напрямую из tsconfig.json
Так как собирается на основе AOT, то не работает всё, что не работает в AOT, например constructor.name
TransferState
До
getEvents(): Observable<TimelineEvent[]> {
return of(this.events).pipe(delay(250));
}После
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { TransferState, makeStateKey } from '@angular/platform-browser';
...
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
private transferState: TransferState
)
...
getEvents(): Observable<TimelineEvent[]> {
if (isPlatformBrowser(this.platformId)) {
// Client only code.
// platformId === browser
}
if (isPlatformServer(this.platformId)) {
// Server only code.
// platformId === server
}
const TYAPK_KEY = makeStateKey<TimelineEvent[]>('tyapk');
if (this.transferState.hasKey(TYAPK_KEY)) {
const transferEvents = this.transferState.get<TimelineEvent[]>(
TYAPK_KEY,
null
);
this.transferState.remove(TYAPK_KEY);
return of(transferEvents);
} else {
return of(this.events).pipe(
delay(250),
tap(events => {
if (isPlatformServer(this.platformId)) {
this.transferState.set(TYAPK_KEY, events);
}
})
);
}
}