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

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

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне <ng-template>, использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

15 сентября 2019 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

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

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.