ng new universally-speaking && cd universally-speaking
ng add @nguniversal/express-engine --clientProject universally-speaking
npm run build:ssr
npm run serve:ssr

const app = express();

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

@angular/platform-browser
@angular/platform-browser-dynamic
@angular/platform-server
@angular/platform-webworker // Gone!!
@angular/platform-webworker-dynamic // Gone!!
@angular/platform-terminal // !!!

// @angular/platform-server

@NgModule({
    exports: [BrowserModule],
    imports: [HttpModule, HttpClientModule, NoopAnimationsModule],
    providers: [
        SERVER_RENDER_PROVIDERS,
        SERVER_HTTP_PROVIDERS,
        // ...
    ] 
})
export class ServerModule { }

import { Component, Renderer2 } from '@angular/core'

@Component({
    // ...
})
export class MyComponent {
    constructor (
        private _renderer: Renderer2
    ) { }
}

@Injectable({
    providedIn: 'root'
})
export class WindowRef<T extends Window = Window> {
    private readonly _window: T | null;

    constructor () {
        this._window = this._getWindow();
    }

    public useWindow <U> (handler: (window: T) => U): U | null {
        return this._window ? handler(this._window): null;
    }

    public _getWindow (): T | null {
        return typeof window !== 'undefined' ? window as T : null;
    }
}

export const URL_LOCATION_TOKEN = new InjectionToken('URL_LOCATION');

@Injectable({
    // ...
})
export class UrlLocationService {
    constructor (
        private _window: WindowRef,
        @Optional() @Inject(URL_LOCATION_TOKEN) private _location: Location
    ) {
        this._location = this._location || this._window.useWindow(w => w.location);
    }

    public getHostname (): string {
        return this._location.hostname;
    }
}

if (typeof window === 'undefined') {
  (global as any).window = {};
  require('three-trackballcontrols');
  delete (global as any).window;
}

import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

@Component({
    // ...
})
export class MyComponent {
    constructor (
        @Inject(PLATFORM_ID) private _platformId: Object
    ) { }

    public myExpensiveDomHeavyOperation (): void {
        if (!isPlatformBrowser(this._platformId) {
            return;
        }

        this._useTheDom();
    }
}

@Component({
  selector: 'us-asteroid-visualisation',
  templateUrl: './asteroid-visualisation.component.html',
  styleUrls: ['./asteroid-visualisation.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AsteroidVisualisationComponent implements OnInit {
  @ViewChild('container') public container: ElementRef;
  
  constructor (
    private _asteroidDataFacade: AsteroidDataFacade,
    private _renderer: Renderer2,
    @Optional() private _visualisationService: VisualisationService
  ) { }
  
  public ngOnInit (): void {
    if (this._visualiationService) {
      const canvas = this.visualisationService.init(this.container);
      this._renderer.appendChild(this.container.nativeElement, canvas);
    } 
  }
}

@NgModule({
    imports: [
        // ...
    ],
    bootstrap: [AppComponent],
    providers: [
        { provide: VisualisationService, useValue: null }
    ]
})
export class AppServerModule { }

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  // ...
})
export class AppComponent implements OnInit {
  asteroids: Array<Asteroid>;
  
  constructor (
    private _asteroidDataService: AsteroidDataService
  ) { }
  
  public ngOnInit (): void {
    this._asteroidDataService.getAsteroids().subscribe(data => this.asteroids = data);
  }
}

@Injectable()
export class AsteroidDataEffects {
  // ...

  @Effect()
  public getAsteroidDataFromApiEffect$ = this._actions$.pipe(
    ofType<GetAsteroidDataFromApiAction>(GetAsteroidDataFromApiAction.TYPE),
    switchMap(action => {
      return this._asteroidDataService.getAsteroidData(action.options).pipe(
        map(
          response => 
            new GetAsteroidDataFromApiSuccessAction(action.options, response)
        ),
        catchError(
          err => 
            of(new GetAsteroidDataFromApiFailAction(action.options, err))
        )
      );
    })
  );
}

@Injectable()
export class AsteroidDataEffects {
  // ...

  @Effect()
  public getAsteroidDataFromApiEffect$ = this._actions$.pipe(
    ofType<GetAsteroidDataFromApiAction>(GetAsteroidDataFromApiAction.TYPE),
    switchMap(action => {
      return this._asteroidDataService.getAsteroidData(action.options).pipe(
        map(
          response => 
            new GetAsteroidDataFromApiSuccessAction(action.options, response)
        ),
        catchError(
          err => 
            of(new GetAsteroidDataFromApiFailAction(action.options, err))
        )
      );
    })
  );
}

@Effect()
public getAsteroidDataEffect$ = this._actions$.pipe(
  ofType<GetAsteroidDataFromApiAction>(GetAsteroidDataAction.TYPE),
  switchMap(action => {
    this._store.select(AsteroidDataSelectors.currentAsteroidData).pipe(
      take(1),
      map(() => new GetAsteroidDataFromApi(action.options))
    )
  })
)

@Effect()
public getAsteroidDataFromApiEffect$ = this._actions$.pipe(
  ofType<GetAsteroidDataFromApiAction>(GetAsteroidDataFromApiAction.TYPE),
  switchMap(action => {
    return this._asteroidDataService.getAsteroidData(action.options).pipe(
      map(response =>
        new GetAsteroidDataFromApiSuccessAction(action.options, response)
      )
    );
  })
);

@Effect()
public getAsteroidDataEffect$ = this._actions$.pipe(
  ofType<GetAsteroidDataFromApiAction>(GetAsteroidDataAction.TYPE),
  switchMap(action => {
    this._store.select(AsteroidDataSelectors.currentAsteroidData).pipe(
      take(1),
      filter(item => this._cacheService.shouldFetch(item, TWO_MINUTES)),
      map(() => new GetAsteroidDataFromApi(action.options))
    )
  })
)

@Effect()
public getAsteroidDataFromApiEffect$ = this._actions$.pipe(
  ofType<GetAsteroidDataFromApiAction>(GetAsteroidDataFromApiAction.TYPE),
  switchMap(action => {
    return this._asteroidDataService.getAsteroidData(action.options).pipe(
      map(response =>
        new GetAsteroidDataFromApiSuccessAction(action.options, response, Date.now())
      )
    );
  })
);