Для запуска приложения Angular 5 на сервере node.js необходимы:
* следуя рекомендациям сайта будет установлена версия 1.2 Ленивцам вроде меня нужна версия 1.6*.
** опционально, но с ним быстрее
Вообще говоря, заголовок слишком громкий для необходимых действий.
Если установлен
После этого
Итак,
Создаем проект
Если в папке проекта отсутствует папка
Тогда выполняем
Теперь наше маленькое приложение почти готово. Можно запустить его в режиме разработки
И насладиться типовой страницей по адресу http://localhost:4200
Но все это затевалось ведь не для этого. И предлагаю перейти к следующему шагу
И вот здесь нужен
Второе слово
Эта команда чудесным образом создает необходимые файлы и меняет конфигурацию существующих.
Теперь установим пакеты для сервера
Любители npm могут выполнить
Нам остается только создать файл
И в файле
Завершающая фаза. Собираем и запускаем наш сервер
В данном случае, уже знакомую страницу приветствия нашего приложения можно увидеть по адресу: http://localhost:3000
Особо недоверчивые могут отключить javascript в браузере и убедиться, что все отрисовывается на стороне сервера.
Совсем ленивые могут получить готовый проект здесь.
А любопытные могут прочитать статью, которая является основой для данного туториала.
* следуя рекомендациям сайта будет установлена версия 1.2 Ленивцам вроде меня нужна версия 1.6*.
Подробности под спойлером
Если ng (angular/cli) уже установлен. Проверьте версию
Если версия <1.6 — обновимся
Проверим результат
Если версия > 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.6ng 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 в корне нашего маленького проекта 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 в браузере и убедиться, что все отрисовывается на стороне сервера.
Совсем ленивые могут получить готовый проект здесь.
А любопытные могут прочитать статью, которая является основой для данного туториала.
Комментарии (3)
MaxKorz
16.12.2017 02:24Честно не понимаю, в чем смысл статьи размером с твит, где первым пунктом объясняется «как установить Angular CLI», а вторым — «как установить universal» (не объясняя что это). При этом название статьи совершенно не отражает содержимое.
yu-hritsaiy
16.12.2017 10:02Не обязательно отключать js в браузере достаточно посмотреть исходный код страницы, при серверном рендеринге будет весь html код. А так статья — перевод мануала на русский. Где про подводные камни, почему может не собираться билд, как работать с dom?
antonksa
5?! Уже 5?! Я же только начал переходить с 1.5 на 2 О_о