Про 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);
                }
            })
        );
    }
}

Похожие записи

Вложенные формы Angular

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer