Оставайся ленивым с angular/cli
Для запуска приложения Angular 5 на сервере node.js необходимы:
- node.js
- angular/cli*
- yarn**
* следуя рекомендациям сайта будет установлена версия 1.2 Ленивцам вроде меня нужна версия 1.6*.
ng -v
Если версия <1.6 — обновимся
npm uninstall -g @angular/cli
npm cache
npm cache verify
npm i -g @angular/cli@latest
Проверим результат
ng -v
Если версия > 1.6 — цель достигнута.
** опционально, но с ним быстрее
Шаг 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, то предлагаю оставить все как есть. Потом это всегда можно исправить.
Эта команда чудесным образом создает необходимые файлы и меняет конфигурацию существующих.
Теперь установим пакеты для сервера
yarn add @angular/platform-server express @nguniversal/express-engine
Любители npm могут выполнить
npm i @angular/platform-server express @nguniversal/express-engine
Нам остается только создать файл 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
node server.js
В данном случае, уже знакомую страницу приветствия нашего приложения можно увидеть по адресу:
http://localhost:3000
Особо недоверчивые могут отключить javascript в браузере и убедиться, что все отрисовывается на стороне сервера.
Совсем ленивые могут получить готовый проект здесь
А любопытные могут прочитать статью, которая является основой для данного туториала.
