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

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

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Angular setter

Пример задания значения булева Input свойства как директивы, на примере:

09 октября 2018 г. в Angular