Оставайся ленивым с angular-cli

Для запуска приложения Angular 5 на сервере node.js необходимы:

• node.js
• angular/cli*
• yarn**

_{* следуя рекомендациям сайта будет установлена версия 1.2 Ленивцам вроде меня нужна версия 1.6*.}

ng -v

npm uninstall -g @angular/cli
npm cache
npm cache verify
npm i -g @angular/cli@latest

ng -v

_{** опционально, но с ним быстрее}

Шаг 1. Развертываем новое приложение

Вообще говоря, заголовок слишком громкий для необходимых действий.

Если установлен yarn рекомендую

ng set --global packageManager=yarn

После этого ng воспользуется yarn для установки всех необходимых зависимостей проекта.
Итак,

ng new my-project
cd my-project

Создаем проект my-project в папке my-project и переходим в эту папку.
Если в папке проекта отсутствует папка node_modules, значит мои рекомендации по установке yarn штатным менеджером пакетов для ng были проигнорированы. Или что-то пошло не так.
Тогда выполняем

npm install

Теперь наше маленькое приложение почти готово. Можно запустить его в режиме разработки

npm run build

И насладиться типовой страницей по адресу http://localhost:4200
Но все это затевалось ведь не для этого. И предлагаю перейти к следующему шагу

Шаг 2. Настраиваем сервер node.js

И вот здесь нужен ng > 1.6

ng g universal universal

Второе слово universal — это не описка. В данном случае, это название для модуля. Если нравится режим copy-paste, то предлагаю оставить все как есть. Потом это всегда можно исправить.
Эта команда чудесным образом создает необходимые файлы и меняет конфигурацию существующих.
Нам остается только создать файл server.js в корне нашего маленького проекта

'use strict';

/* Подключаем Zone.js для сервера */
require('zone.js/dist/zone-node');

const express = require('express');
const ngUniversal = require('@nguniversal/express-engine');

const appServer = require('./dist-server/main.bundle');

/* Рендеринг на стороне сервера */
function angularRouter(req, res) {

  res.render('index', { req, res });

}

const app = express();

/* Направляем роут в корень нашего приложения*/
app.get('/', angularRouter);

/* Отдаем статические файлы генерируемые CLI  (index.html, CSS? JS, assets...) */
app.use(express.static(`${__dirname}/dist`));

/*Конфигурируем движок Angular Express */
app.engine('html', ngUniversal.ngExpressEngine({
  bootstrap: appServer.AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', 'dist');

/* Direct all routes to index.html, where Angular will take care of routing */
app.get('*', angularRouter);
app.post('*', angularRouter);

app.listen(3000, () => {
  console.log(`Listening on http://localhost:3000`);
});

И в файле package.json добавить или заменить скрипт «build»

"sctipts": {
// какие-то другие команды. эту строку при копировании следует удалить
"build": "ng build --prod && ng build --prod --app universal --output-hashing=none"
},

Завершающая фаза. Запускаем наш сервер

npm run build

В данном случае, уже знакомую страницу приветствия нашего приложения можно увидеть по адресу:
http://localhost:3000
Особо недоверчивые могут отключить javascript в браузере и убедиться, что все отрисовывается на стороне сервера.

Совсем ленивые могут получить готовый проект здесь

А любопытные могут прочитать статью, которая является основой для данного туториала.

Автор: eustatos

Источник