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

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


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

Подробности под спойлером
Если ng (angular/cli) уже установлен. Проверьте версию

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 в корне нашего маленького проекта

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 в браузере и убедиться, что все отрисовывается на стороне сервера.

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

А любопытные могут прочитать статью, которая является основой для данного туториала.
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 3
  • +1

    5?! Уже 5?! Я же только начал переходить с 1.5 на 2 О_о

    • +3
      Честно не понимаю, в чем смысл статьи размером с твит, где первым пунктом объясняется «как установить Angular CLI», а вторым — «как установить universal» (не объясняя что это). При этом название статьи совершенно не отражает содержимое.
      • 0
        Не обязательно отключать js в браузере достаточно посмотреть исходный код страницы, при серверном рендеринге будет весь html код. А так статья — перевод мануала на русский. Где про подводные камни, почему может не собираться билд, как работать с dom?

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.