Angularjs ssr как правильно собрать проект?

Для сборки проекта Angular с серверным рендерингом (ssr) нужно выполнить ряд шагов. Ниже приведен подробный процесс.

Шаг 1: Настройка проекта
Первоначально у вас должен быть настроен проект Angular. Если вы еще не создали его, выполните следующую команду в командной строке:

ng new my-angular-app

Затем перейдите в папку проекта:

cd my-angular-app

Шаг 2: Установка зависимостей
Для того чтобы реализовать ssr, необходимо установить дополнительные зависимости. Выполните следующую команду для установки @angular/platform-server и express:

npm install @angular/platform-server express --save

Шаг 3: Создание серверного приложения
Создайте новый файл server.js в корне вашего проекта. В этом файле вы будете настраивать серверное приложение Express. Вот простой пример кода сервера:

// server.js
const express = require('express');
const ngUniversal = require('@nguniversal/express-engine');
const path = require('path');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

const app = express();

// Определение пути к файлу серверного рендеринга
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

// Определение корневой папки для статических файлов
const DIST_FOLDER = path.join(process.cwd(), 'dist');

// Загрузка предопределенных модулей
app.engine('html', ngUniversal.ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [provideModuleMap(LAZY_MODULE_MAP)]
}));

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

// Маршрутизация серверных запросов
app.get('*.*', express.static(path.join(DIST_FOLDER, 'browser')));
app.get('*', (req, res) => {
    res.render('index', { req });
});

// Запуск сервера на порту 4000
app.listen(4000, () => {
    console.log('Angular Universal server is listening on port 4000');
});

В этом коде мы используем Express.js, чтобы создать серверное приложение, а также @nguniversal/express-engine для интеграции Angular с сервером Express. Он загружает предопределенные модули, которые были созданы при сборке проекта Angular.

Шаг 4: Изменение файла angular.json
Для того чтобы собрать проект с ssr, необходимо внести некоторые изменения в файл angular.json. Откройте его и найдите раздел "architect". Внутри раздела "architect", добавьте следующий код:

"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
    }
}

Также убедитесь, что в секции "projects" имеется следующий фрагмент кода:

"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
    }
},
"browser": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "dist/browser",
        ...
    }
}

После внесения этих изменений, файл angular.json будет выглядеть примерно так:

{
    ...
    "projects": {
        "my-angular-app": {
            ...
            "architect": {
                "build": {
                    ...
                },
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/server",
                        "main": "src/main.server.ts",
                        "tsConfig": "src/tsconfig.server.json"
                    }
                },
                "browser": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/browser",
                        ...
                    }
                }
            }
        },
        ...
    }
}

Шаг 5: Создание серверной точки входа
Создайте новый файл src/main.server.ts с содержимым:

// Импорт модуля AppServerModule
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

export { AppServerModule };

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

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

Шаг 6: Создание файла tsconfig.server.json
Создайте новый файл src/tsconfig.server.json с содержимым:

{
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app-server",
        "module": "commonjs",
        "target": "es2017",
        "types": ["node"]
    },
    "exclude": ["src/test.ts", "**/*.spec.ts"]
}

Этот файл настраивает компилятор TypeScript с помощью опций, необходимых для серверной сборки.

Шаг 7: Сборка проекта
Теперь вы можете собрать свой проект, используя следующую команду:

ng build --prod && ng run my-angular-app:server

После успешной сборки вы обнаружите сгенерированные файлы в папках dist/browser и dist/server.

Шаг 8: Запуск сервера
Запустите серверное приложение, выполнив следующую команду:

node server.js

После запуска сервера, вы должны увидеть сообщение Angular Universal server is listening on port 4000.

Теперь ваш проект Angular с серверным рендерингом готов к работе. Вы можете проверить его, открыв веб-браузер и перейдя по адресу http://localhost:4000.

Важно отметить, что этот процесс варьируется в зависимости от версии Angular, используемых модулей и инструментов сборки. Обязательно проверьте официальные документы Angular и пакетов, которые вы используете, для получения актуальной информации о сборке проекта с ssr.