Технология, которая позволяет нам запускать наши приложения Angular на сервере, описывается в документации Angular как Angular Universal. Angular Universal  генерирует  статические  страницы приложений на сервере с помощью процесса, называемого  серверным рендерингом (SSR).

Он может генерировать и обслуживать страницы в ответ на запросы браузеров. Он также может предварительно сгенерировать шаблон Angular в виде HTML-файлов, которые вы обслуживаете позже.

Стандартное Angular приложение выполняется в  браузере, отображая страницы в DOM в ответ на действия пользователя.

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

В этой статье вы узнаете, как добавить поддержку Angular Universal в любое существующее приложение Angular. Давайте начнем с установки зависимостей

Рендеринг на стороне сервера - установка зависимостей

Чтобы реализовать рендеринг на стороне сервера, нам нужно установить некоторые дополнительные зависимости.

Откройте терминал и введите следующие команды:

$ npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

Корневой AppModule

Откройте файл src/app/app.module.ts и найдите BrowserModule импорт в NgModule.

Замените этот импорт следующим:

BrowserModule.withServerTransition({ appId: 'your App-ID' }),

Создайте app.server.module.ts файл в src/app/ каталоге со следующим кодом AppServerModule:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

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

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  providers: [
    // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
})

export class AppServerModule {}

Создайте main.server.ts файл в каталоге src со следующим кодом:

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

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

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';

// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

Создайте tsconfig.server.json файл в /src каталоге для настройки TypeScript и AOT-компиляции универсального приложения.

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

Создайте webpack.server.config.js файл в корневом каталоге проекта со следующим кодом:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: { server: './server.ts' },
  resolve: { extensions: ['.js', '.ts'] },
  target: 'node',
  // this makes sure we include node_modules and other 3rd party libraries
  externals: [/(node_modules|main\..*\.js)/],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
  },
  plugins: [
    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
    // for 'WARNING Critical dependency: the request of a dependency is an expression'
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

Обновите раздел приложений .angular-cli.json 

"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.css"],
 "scripts": [],
 "environmentSource": "environments/environment.ts",
 "environments": {
 "dev": "environments/environment.ts",
 "prod": "environments/environment.prod.ts"
 }
 },
 {
 "platform": "server",
 "root": "src",
 "outDir": "dist/server",
 "assets": ["assets", "favicon.ico"],
 "index": "index.html",
 "main": "main.server.ts",
 "test": "test.ts",
 "tsconfig": "tsconfig.server.json",
 "testTsconfig": "tsconfig.spec.json",
 "prefix": "app",
 "styles": ["styles.css"],
 "scripts": [],
 "environmentSource": "environments/environment.ts",
 "environments": {
 "dev": "environments/environment.ts",
 "prod": "environments/environment.prod.ts"
 }
 }
],

Сборка и запуск с Universal

Теперь, когда вы создали файлы конфигурации TypeScript и Webpack, вы можете создать и запустить приложение Angular Universal.

Сначала добавьте build и обслуживающие  команды в разделе сценариев package.json:

"scripts": {
    ...
    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:universal": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    ...
}

Из терминала введите:

npm run build:universal

После сборки приложения запустите сервер.

npm run serve:universal

В заключение. Откройте окно браузера http://localhost:4000/, чтобы получить доступ к приложению Angular на стороне сервера.

Вывод

С помощью рендеринга на стороне сервера мы можем гарантировать, что поисковые системы, браузеры с  отключенным Javascript или браузеры без Javascript по-прежнему смогут получать доступ к содержимому нашего сайта.

Источник перевода