Angular 5 universal c Передачей Состояния (Transfer State), используя @angular/cli

Вдохновленный:
Можете ли вы создать статью, в которой объяснен пререндеринг главной страницы, используя @angular/cli universal, чтобы свести к минимуму первоночальную загрузгу в большом приложении и уже затем рендерить все остальные страницы без universal (без перезагрузки страницы) ?

Я покажу как создать universal проект, используя Angular 5 версии 5.0.0-rc.1.

Это приложение будет отдавать свое состояние от сервера браузеру, чтобы предотвратить избыточные HTTP запросы.

Выполним следующие команды:

npm install -g @angular/cli ng new --skip-install universal-demo-v5 cd universal-demo-v5 code . # Open VSCode

Обновим зависимости в package.json:

{
  "name": "universal-demo-v5",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.5.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.6.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.0.47",
    "codelyzer": "~4.0.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.2.0",
    "ts-node": "~3.3.0",
    "tslint": "~5.8.0",
    "typescript": "~2.4.2"
  }
}

Давайте настроим наш Server Module

npm install -S @angular/platform-server@^5.0.0-rc.1 express npm install -D ts-loader webpack-node-externals npm-run-all npm install

Создайте файл в этой части: src/app/app.server.module.ts:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

Обновим src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'universal-demo-v5' })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Нам потребуется создать основной файл в этой части src/main.server.ts, чтобы экспортровать наш серверный модуль.

export { AppServerModule } from './app/app.server.module';

Теперь давайте обновим настройки @angular/cli в .angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "universal-demo-v5"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist/browser",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "platform": "server",
      "root": "src",
      "outDir": "dist/server",
      "assets": [],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

Нам потребуется создать новый tsconfig.json для сервера по этому пути: src/tsconfig.server.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

Нам потребуется обновить файл src/tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "server.ts"
  ]
}

Далее запустим следующие команды, чтобы увидеть корректность сборки:

ng build -prod --build-optimizer --app 0 ng build --aot --app 1

После запуска команд должно произойти что-то такое:

Теперь давайте настроим наш Express.js сервер, будет необходимо создать файл: src/server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

enableProdMode();

const PORT = process.env.PORT || 4200;
const DIST_FOLDER = join(process.cwd(), 'dist');

const app = express();

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory } = require('main.server');

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

Далее потребуется webpack с конфигом, чтобы создавать этот server.ts файл: webpack.config.js

const path = require('path');
var nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: {
    server: './src/server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      'main.server': path.join(__dirname, 'dist', 'server', 'main.bundle.js')
    }
  },
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}

Сейчас мы можем добавить некоторые скрипты в наш package.json, чтобы собирать наш проект:

{
  "name": "universal-demo-v5",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "run-s build:client build:aot build:server",
    "build:client": "ng build -prod --build-optimizer --app 0",
    "build:aot": "ng build --aot --app 1",
    "build:server": "webpack -p",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.5.1",
    "express": "^4.16.2",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.6.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.0.47",
    "codelyzer": "~4.0.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-run-all": "^4.1.1",
    "protractor": "~5.2.0",
    "ts-loader": "^3.1.1",
    "ts-node": "~3.3.0",
    "tslint": "~5.8.0",
    "typescript": "~2.4.2",
    "webpack-node-externals": "^1.6.0"
  }
}

Теперь попробуйте запустить это:

npm run build

На выходе получится что-то подобное:

Теперь попробуйте в браузере, запустив: node dist/server.js

Откройте http://localhost:4200/ и вы должны увидеть ваше приложение работающие как на скрине ниже:

В инструментах разработчика, во вкладке сеть, исследуя localhost запросы, вы увидете, что контент страницы рендерится на сервере.

Давайте поговорим о состоянии State, мы собираемся сделать запрос некоторых данных, из некоторого свободного REST API в нашем AppComponent.

Давайте импортируем HttpClientModule в нашем AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'universal-demo-v5' }),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Запрос некоторых данных в app.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  title = 'app';

  dogs: any;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.http
      .get('https://dog.ceo/api/breeds/list/all')
      .subscribe(data => {
        console.log(data);
        this.dogs = data;
      });
  }
}

Выведем данные в шаблоне:

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<pre>{{ dogs | json}}</pre>

Давайте посмотрим, что случится, когда мы сделаем: npm run build && node dist/server.js

Если взглянуть на запрос в браузере мы увидим, что данные получены дважды: один раз на сервере и второй в браузере, что не очень хорошо.

Мы можем решить эту проблему, используя новый Angular модуль для Transfer State (передачи состояния), давайте посмотрим как это реализовать.

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

// app.module.ts
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'universal-demo-v5' }),
    HttpClientModule,
    BrowserTransferStateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/platform-browser';

const DOGS_KEY = makeStateKey('dogs');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  title = 'app';

  dogs: any;

  constructor(
    private http: HttpClient,
    private state: TransferState
  ) { }

  ngOnInit() {
    this.dogs = this.state.get(DOGS_KEY, null as any);

    if (!this.dogs) {
      this.http
        .get('https://dog.ceo/api/breeds/list/all')
        .subscribe(data => {
          this.dogs = data;
          this.state.set(DOGS_KEY, data as any);
        });
    }
  }
}

Нам осталось внести небольшую правку в файл main.ts, чтобы загружать наше приложение только, когда документ готов, чтобы Transfer State работал правильно.

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

Запустим npm run build && node dist/server.js и посмотрим, что произойдет:

Вы можете отметить, что в браузере отсутствуют лишние запросы, поскольку состояние было перенесено от сервера клиенту, в новый тег script с id=universal-demo-v5-state

Файлы

angular-cli.json:

Свойства:

apps (array): свойства различных приложений в проекте; в нашем проекте их два: само приложение и сервер.
tsconfig (string): имя файла конфигурации TypeScript. По умолчанию: tsconfig.app.json.

tsconfig.json:

tsconfig.json присутствие этого файла в директории говорит о том, что директория является корневой для TypeScript проекта. В нем указываются параметры компиляции.

Чистим и ставим заново angular-cli

Если у вас установлен angular-cli, удалите его:

npm uninstall -g angular-cli

Для новой версии:

npm uninstall -g @angular/cli

Очищаем кещ:

npm cache clean

Обновите, если необходимо node/npm.

Установите глобально новую версию Angular CLI:

npm install -g @angular/cli@latest

Полезные ссылки

universal на angular.io
Источник: Angular 5 universal с Transfer State используя @angular/cli

universal на angular.io

Приведу небольшие отрывки из официального руководства.

Как это работает

platform-server пакет имеет серверную реализацию DOM, XMLHttpRequest и другие низкоуровневые особенности, которые не зависят от браузера.

Забиваем Сайты В ТОП КУВАЛДОЙ - Уникальные возможности от SeoHammer

Каждая ссылка анализируется по трем пакетам оценки: SEO, Трафик и SMM. SeoHammer делает продвижение сайта прозрачным и простым занятием. Ссылки, вечные ссылки, статьи, упоминания, пресс-релизы - используйте по максимуму потенциал SeoHammer для продвижения вашего сайта.

Что умеет делать SeoHammer

— Продвижение в один клик, интеллектуальный подбор запросов, покупка самых лучших ссылок с высокой степенью качества у лучших бирж ссылок.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.

SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.

Зарегистрироваться и Начать продвижение

// app.server.module.ts
import { ServerModule } from '@angular/platform-server';

Вы собираете клиентское приложение с platform-server вместо platform-browser и запускаете результирующее Universal веб-приложение на веб-сервере.

Сервер (Express) передает пользовательские запросы на страницы приложения функции Universal renderModuleFactory.

Функция renderModuleFactory принимает в качестве входных данных HTML страницу (обычно index.html), модуль Angular, содержащий компоненты, и роутинг, который определяет какие компоненты отображать.

Маршрут строится исходя из запроса клиента на сервер. Каждый запрос складывается в соответствующее view для запрошенного роута.

renderModuleFactory рендерит view внутри тега app, создавая финишную страницу HTML для клиента.

Наконец, сервер возвращает отрендеренную страницу клиенту.

Подготовка

подготовка на angular.io

@angular/platform-server - Universal серверный компонент
@nguniversal/module-map-ngfactory-loader - обрабатываем ленивую загрузку в контексте серверного рендера
@nguniversal/express-engine - движок express для Universal приложения
ts-loader - typescript лоадер для webpack

HTTP-запросы выпущенный браузером не тоже самое, когда они выпущены на сервере.

Когда браузер делает HTTP-запрос, сервер может предположить что-то насчет кук, заголовков и т.д.

Например, браузер автоматически отправляет куки с авторизацией текущего пользователя. Angular Universal не может отсылать эти данные серверу. Если ваш сервер обрабатывает HTTP запросы, вам придется добавить свою собственную безопасную передачу данных.