arutnik

const createNamespace = require('cls-hooked').createNamespace;

const clsNamespace = createNamespace('mycomp');

//... Create middleware that adds the incoming header value to clsNamespace

//... Run the below code during server start up
require('./http-instrumenter')(console, clsNamespace);

arutnik

const http = require('http');
const https = require('https');

function urlToOptions(url) {
  const options = {
    protocol: url.protocol,
    hostname: typeof url.hostname === 'string' && url.hostname.startsWith('[') ?
      url.hostname.slice(1, -1) :
      url.hostname,
    hash: url.hash,

arutnik

@Component({
  selector: 'app-root',
  template: `
    <span class="hidden">This text is important for a
    crawler to see, but I can't have it on screen 
    because I need to put my human users first and
    they get to see a rich visual experience instead
    of this text. So I hide it with CSS. Remember that
    this will penalize this text's importance, but it's
    better than not having it visible to crawlers at all.

arutnik

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

/**
 * A service that when injected in the app component
 * will print a version injected by the server
 * once loaded on the client
 */
@Injectable()

arutnik

plugins: [
    new webpack.NormalModuleReplacementPlugin(/jquery-funpicker/, // Adding this rule strips jquery-funpicker
        path.join(__dirname, 'webpack/empty.json')),              // out of the server bundle
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(

arutnik

import { Directive, Input, TemplateRef, ViewContainerRef, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformServer, isPlatformBrowser } from '@angular/common';
/**
 * Adds the template content to the DOM only if the platform is the requested platform
 * 
 * Usage to make a component only visible on client renders:
 * <div *ifPlatform="'browser'">....</div>
 * 
 * Usage to make a component only visible on server renders:
 * <div *ifPlatform="'server'">...</div>

arutnik

import { ElementFocusService } from './element-focus.service';
import { Injectable, ElementRef } from '@angular/core';

@Injectable()
export class ElementFocusBrowserService extends ElementFocusService {

  constructor() {
    super();
   }

arutnik

import { ElementFocusService } from './element-focus.service';
import { Injectable, ElementRef } from '@angular/core';

@Injectable()
export class ElementFocusServerService extends ElementFocusService {

  constructor() {
    super();
   }

arutnik

import { ElementRef } from '@angular/core';

export abstract class ElementFocusService {

  /**
   * Transfers focus to an element
   * @param element 
   */
  public abstract focusElement(element: ElementRef)
}

arutnik

//In app.browser.module.ts providers:

{
  provide: ElementFocusService,
  useClass: ElementFocusBrowserService
},

//In app.server.module.ts providers:

{