2

Добрый день!

Помогите, пожалуйста, разобраться в том, как правильно установить Angular Universal.

Казалось бы, что может быть понятнее и проще. Зайти на официальный сайт, пройти ясно и чётко описанные шаги. Если что-то пошло не так, то в Гугле всегда должна найтись нужная информация.

Я сейчас хочу перевести один из своих сайтов, написанный на Angular JS, на Angular Universal для того, чтобы обеспечить серверный рендеринг и помочь поисковикам индексировать информацию на сайте.

С чем я столкнулся и что я уже проделал сейчас. Для начала я зашёл на официальный сайт Angular Universal и прошёл те шаги, которые там описаны. Установил Node.js последнюю версию, записал пути в $PATH, развернул в PhpStorm проект, который указан на Git. При попытке выполнить команды

npm install body-parser angular2-universal preboot express --save

typings install node express body-parser serve-static express-serve-static-core mime --ambient

получил предупреждения и ошибки.

Добавил файл server.js, который представлен на официальном сайте. При попытке запустить команду node server.js появляются ошибки, связанные с командами import в server.js.

Хорошо. Пошёл на Гугл. Нашёл несколько других описаний как развернуть Angular. Один проект даже запустился, однако без файла server.js - а он, насколько я понимаю, важен для серверного рендеринга.

При попытках установить Angular CLI тоже появляются ошибки.

В итоге, я вижу, что даже просто установить Angular Universal оказалось не легко. Инструкции часто датируются началом или серединой 2016 года и видимо устарели.

Я буду благодарен за помощь и совет. Было бы хорошо получить ответ в виде пунктов, что и как нужно делать, по шагам, какие команды выполнять, как правильно подключить server.js и обеспечить серверный рендеринг.

Если найдётся грамотный ответ, я уверен, он поможет многим другим людям в решении такой же задачи, поскольку в Гугл люди часто пишут о том, что сталкиваются с ошибками при установке Angular Universal. Кроме того, почти всё, что касается этой темы - на английском языке. На русском я пока не встречал подробные обсуждения такой темы. Тем более, хороший совет здесь будет очень ценен.

1
  • Как добавить серверный рендеринг: На этом ресурсе хорошо описано на английском: scotch.io/tutorials/… 1. Скачиваем начальный проект с файлами для серверного рендеринга по ссылке github.com/angular/universal-starter. 2. Устанавливаем в папку проекта npm. 3. Запускаем > npm start. Идем на localhost:3000.
    – Kirill Ch
    25 фев 2017 в 19:30

1 ответ 1

1

Добавление в процессе поисков: разобрался как правильно установить Angular 2, пока без серверного рендеринга. Это актуально на дату 19.02.17.

  1. Загрузить и установить последнюю версию Node.js с официального сайта по ссылке https://nodejs.org
  2. Скачать начальный проект, указанный на официальном сайте Angular Universal по ссылке https://github.com/AngularClass/angular2-webpack-starter
  3. В директории проекта запустить команду для инсталляции npm, с помощью терминала или из вашей IDE. Поскольку я работаю на Mac, то команда будет иметь вид:

    sudo npm install

Важно использовать sudo (с использованием пароля, иначе может возникнуть ошибка доступа). Для Windows - нужно предпринять аналогичные по смыслу действия.

Если вы ставили npm раньше, то лучше обновить версию, убрать папку node_modules и инсталлировать заново. Это можно сделать командами для Mac:

sudo npm install -g npm@latest
sudo rm -rf node_modules
sudo npm install

В итоге в папке вашего проекта появится папка node_modules.

  1. Выполняете команду

    npm start

После выполнения команды в браузере набираете localhost:3000 и видите свой начальный проект на Angular 2.

В будущем вам понадобится команда остановки сервера из терминала: Ctrl+C

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

Добавление: Итак, разобрался как добавить серверный рендеринг.

На этом ресурсе хорошо описано на английском: https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal

  1. Скачиваем начальный проект с файлами для серверного рендеринга по ссылке https://github.com/angular/universal-starter.
  2. Устанавливаем в папку проекта npm.
  3. Запускаем > npm start. Идем на localhost:3000.

При просмотре html-кода видно, что рендерится только страница Home, все данные с сервера в ней отображаются корректно. Свои страницы добавляйте по аналогии с Home.

Помните, что роуты и свои компоненты нужно добавлять в том числе в файлы app.module.ts, server.routes.ts.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.