jsonLdService

this.jsonLdService.setData('JobPosting', {
              title: job.title,
              description: job.description,
              datePosted: job.created_at,
              employmentType: job.type,
              hiringOrganization: this.jsonLdService.getObject('Organization', {
                name: job.organization.name,
                sameAs: job.organization.website,
              }),
              jobLocation: this.jsonLdService.getObject('Place', {
                address: {
                  addressLocality: job.location,
                  addressRegion: 'TX'
                }
              }),
              validThrough: job.valid_until
            });

prerender

// Load zone.js for the server.
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
import { join } from 'path';
import axios from 'axios';

import { enableProdMode } from '@angular/core';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { renderModuleFactory } from '@angular/platform-server';

const ROUTES = [
  '/',
  '/jobs',
];

axios.get('https://demo4776583.mockable.io/jobs')
  .then(resp => {
    resp.data.forEach(job => {
      ROUTES.push(`/job/${job.jobId}`);
    });
    main();
  });


function main() {
  // * NOTE :: leave this as require() since this file is built Dynamically from webpack
  const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

  const BROWSER_FOLDER = join(process.cwd(), 'browser');

  // Load the index.html file containing referances to your application bundle.
  const index = readFileSync(join('browser', 'index.html'), 'utf8');

  let previousRender = Promise.resolve();

  // Iterate each route path
  ROUTES.forEach(route => {
    const fullPath = join(BROWSER_FOLDER, route);

    // Make sure the directory structure is there
    if (!existsSync(fullPath)) {
      mkdirSync(fullPath, {recursive: true} as any);
    }

    // Writes rendered HTML to index.html, replacing the file if it already exists.
    previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
      document: index,
      url: route,
      extraProviders: [
        provideModuleMap(LAZY_MODULE_MAP)
      ]
    })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
  });

}

robots.txt

# Allow all URLs (see http://www.robotstxt.org/robotstxt.html)
User-agent: *
Disallow:
Sitemap: https://step-4-jobs-portal.now.sh/generated/sitemap.xml

route-helper

import { Injectable } from '@angular/core';
import { Meta,
  Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class RouteHelperService {

  constructor(
    private meta: Meta,
    private title: Title,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    this.router.events
      .pipe(
        filter(e => e instanceof NavigationEnd),
        map(() => this.activatedRoute),
        map(route => {
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
        filter(r => r.outlet === 'primary')
      )
      .subscribe(activeRoute => {
        const seo = activeRoute.snapshot.data.seo;
        if (seo) {
          this.title.setTitle(seo.title);
          this.meta.removeTag('name="description"');
          this.meta.addTag({
            name: 'description',
            content: seo.description,
          });
        }
      });
  }
}

seo-data

seo: {
      title: 'Dallas Jobs Portal - Find New Jobs',
      description: 'Search millions of jobs online in and around Dallas Fortworth Area'
    }

seoServiceJob

this.seoService.setData({
              title: `${job.title} - Dallas Jobs Portal`,
              description: job.description,
              published: job.created_at,
              author: 'Dallas Jobs Portal',
              type: 'website',
            });

sitemap

const axios = require('axios');
const fs = require('fs');
const path = require('path');

const URL = 'https://step-4-jobs-portal.now.sh';
const SITEMAP_LOCATION = path.join(process.cwd(), 'src/generated/sitemap.xml');

const ROUTES = [
  '/',
  '/jobs',
];

axios.get('https://demo4776583.mockable.io/jobs')
  .then(resp => {
    resp.data.forEach(job => {
      ROUTES.push(`/job/${job.slug}/${job.jobId}`);
    });
    main();
  });

function main() {
  const sitemap = `
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${ROUTES.map(route => {
      return `<url>
      <loc>${URL}${route}</loc>
    </url>
    `
    }).reduce((acc, item) => {
      return acc + item;
    }, '')}
  </urlset>
  `;
  fs.writeFileSync(SITEMAP_LOCATION, sitemap);
}

title-and-description

this.title.setTitle(`${job.title} - Dallas Jobs Portal`);
            this.meta.removeTag('name="description"');
            this.meta.addTag({
              name: 'description',
              content: job.description,
            });

transferStateInterceptor

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { tap } from 'rxjs/operators';
import { isPlatformServer } from '@angular/common';


@Injectable({providedIn: 'root'})
export class TransferStateInterceptor implements HttpInterceptor {
  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId,
  ) {

  }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const urlStateKey  = makeStateKey(req.url);

    if (this.transferState.hasKey(urlStateKey)) {
      const res: any = this.transferState.get(urlStateKey, {} as any);
      this.transferState.remove(urlStateKey);
      return of(new HttpResponse({
        ...res,
        headers: new HttpHeaders(res.headers),
      }));
    }
    return next.handle(req).pipe(
      tap(res => {
        if (isPlatformServer(this.platformId)) {
          this.transferState.set(urlStateKey, res);
        }
      })
    );
  }
}