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

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

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

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

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

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

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

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

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
10 января 2019 г. в Angular

Angular & MVVM

  • Model - just file like user.class.ts
  • View - HTML template of component
  • ViewModel - Typescript part of a component
14 апреля 2019 г. в Angular

Вставить <script> в Angular компонент

Добавление сторонних скриптов в Angular по запросу. Как известно, добавить скрипт через шаблон невозможно. Представлено решение как это сделать программно.