Angular2 как сделать server side rendering?

Как-то все мутно и непонятно. Есть проект на гитхабе angular/universal. Но я не настолько разбираюсь в яваскрипте, чтобы понять, что именно оно решает.
Задача проста, как сапог - когда посетитель переходит по внешней ссылке на одностраничное веб-приложение, сервер рендерит страницу, которая бы еще и задавала состояние приложения. И дальше посетитель уже работает с одностраничником с рендерингом в браузере.
Сеошники хотят, чтобы сервер отдавал по ссылке не бутстрап приложения, а контент, эквивалентный тому, что получит посетитель, перейдя в одностраничнике по конкретной ссылке.
Если не умеет второй ангуляр, есть ли яваскриптовые библиотеки, которые умеют?
Спасибо.
  • Вопрос задан
  • 4759 просмотров
Решения вопроса 1
@bromzh
Drugs-driven development
https://github.com/angular/universal-starter
В файле src/server.ts все ответы. Суть такая:
1) создаём express-приложение
let app = express();
2) настраиваем обработку .html-файлов на ангуляровский рендерер из universe
app.engine('.html', expressEngine);
app.set('views', __dirname);
app.set('view engine', 'html');

3) Создаём функцию-обработчик, которая будет рендерить ангуляр-приложение на сервере, если пользователь зайдёт по определённым ссылкам
function ngApp(req, res) {
  let baseUrl = '/';
  let url = req.originalUrl || '/';
  res.render('index', {
    directives: [ Html ],
    ...
  }
}

4) В этой функции каким-то образом надо подключить корневой компонент App. В приведённой ссылке это делается так: создаётся компонент Html (src/server-only-app/html.component.ts), который содержит полностью весь код index.html (кроме тегов html). Можно было просто в функцию ngApp указать в поле directives корневой компонент.
5) Запускаем приложуху
app.use(express.static(root, {index: false}));

// Routes with html5pushstate
app.use('/', ngApp);
app.use('/about', ngApp);
app.use('/home', ngApp);

// Server
app.listen(3000, () => {
  console.log('Listen on http://localhost:3000');
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@EmirMamashov
Web-developer
Ответ написан
Комментировать
mazhekin
@mazhekin
Frontend, Backend Web Developer
Вот тут пошагово и подробно описано как включить рендеринг на сервер с Angular Universal (с рабочим примером на гитхабе)
Angular Universal: Реализация серверной генерации ...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы