- PVSM.RU - https://www.pvsm.ru -
Для запуска приложения Angular 5 на сервере node.js необходимы:
* следуя рекомендациям сайта будет установлена версия 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 — цель достигнута.
** опционально, но с ним быстрее
Вообще говоря, заголовок слишком громкий для необходимых действий.
Если установлен 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 [4]
Но все это затевалось ведь не для этого. И предлагаю перейти к следующему шагу
И вот здесь нужен 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 [5]
Особо недоверчивые могут отключить javascript в браузере и убедиться, что все отрисовывается на стороне сервера.
Совсем ленивые могут получить готовый проект здесь [6]
А любопытные могут прочитать статью [7], которая является основой для данного туториала.
Автор: eustatos
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/node-js/270817
Ссылки в тексте:
[1] node.js: https://nodejs.org/en/
[2] angular/cli: https://cli.angular.io/
[3] yarn: https://yarnpkg.com
[4] http://localhost:4200: http://localhost:4200
[5] http://localhost:3000: http://localhost:3000
[6] здесь: https://github.com/eustatos/universal-angular
[7] статью: https://medium.com/@cyrilletuzi/angular-server-side-rendering-in-node-with-express-universal-engine-dce21933ddce
[8] Источник: https://habrahabr.ru/post/344832/?utm_source=habrahabr&utm_medium=rss&utm_campaign=344832
Нажмите здесь для печати.