Angular 6 Prerendering

README.md

Add these files!

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
    imports: [AppModule, ServerModule],
    bootstrap: [AppComponent],
})
export class AppServerModule {}

package.json

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build --prod && ts-node --project src/tsconfig.server.json prerender.ts",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "~6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@angular/platform-server": "^6.0.7",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "fs-extra": "^6.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

prerender.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { outputFile, readFileSync, removeSync } from 'fs-extra';
import { join } from 'path';
import { enableProdMode } from '@angular/core';
import { renderModule } from '@angular/platform-server';
import { AppServerModule } from './src/app/app.server.module';
import { routes } from './src/app/router/app.router.module';
enableProdMode();

const outputDirectory = 'docs';
const document: string = readFileSync(join('dist', 'index.html'), 'utf-8');

routes
    .map(route => route.path)
    .filter(path => !path.includes('*'))
    .forEach(async path => outputFile(
        // write to index.html for each path
        join(outputDirectory, path, 'index.html'),

        // render app module to string
        await renderModule(AppServerModule, {
            // replace relative base hrefs
            document: document.replace(
                /<base href="">/,
                `<base href="${path.replace(/[^\/]+/g, '..')}">`
            ),
            url: path
        })
    ));

tsconfig.server.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}