We at work just started re-architecture of our application, so we need SEO support for single page application which we gonna build with Angular 2/4.
Based on R&D on internet we found that angular universal is pretty cool. It solves our problem for server side rendering for static data as well AJAX called data.
But this ajax called data only made available when services are being called at the start of the component(in NgInit more precisely). But when we make changes any further like searching for some products then the dynamically generated data won't be available in view page source hence it won't be available for google bot or other crawlers also.
Angular Universal provides a simple example with server side rendering here.
If somebody has done this before please try and answer.
It would be great if nobody marks it as off topic or spam because I have seen many questions in SO but none of them answers my problem here.
Few work around
Node Version
8.2.1
NPM version
5.3.1
Angular 4.2
Angular Cli
1.0.3
os: linux x64
Using NodeJS for SSR(Server Side Rendering).
Here's snippet for my server.ts
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = 3000;
enableProdMode();
const app = express();
let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
app.engine('html', (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, opts)
.then(html => callback(null, html));
});
app.set('view engine', 'html');
app.set('views', 'src')
app.get('*.*', express.static(join(__dirname, '..', 'dist')));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`listening on http://localhost:${PORT}!`);
});