Skip to content

Instantly share code, notes, and snippets.

@dannyockilson
Created May 21, 2019 10:23
Show Gist options
  • Save dannyockilson/fe9078d1748194e6107a1278e1b360e5 to your computer and use it in GitHub Desktop.
Save dannyockilson/fe9078d1748194e6107a1278e1b360e5 to your computer and use it in GitHub Desktop.
Angular Pre-render
import 'reflect-metadata';
// Load zone.js for the server.
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { ROUTES } from './prerender.routes';
enum CONFIG {
srcApp = 'name-of-app-to-prerender-from-angular-json',
staticApp = 'name-of-static-output-directory',
serverApp = 'name-of-server-module-output-directory',
}
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
const BROWSER_FOLDER = join(process.cwd(), 'dist', CONFIG.staticApp);
// Load the index.html file containing references to your application bundle.
const indexPath = join('dist', CONFIG.srcApp, 'index.html');
async function render(routes: string[], browserFolder: string, serverApp: string) {
const {
AppServerModuleNgFactory,
LAZY_MODULE_MAP,
} = await import(`../../dist/${serverApp}/main`);
let previousRender = Promise.resolve();
routes.forEach(route => {
const fullPath = join(browserFolder, route);
// Make sure the directory structure is there
if (!existsSync(fullPath)) {
mkdirSync(fullPath);
}
// Writes rendered HTML to index.html, replacing the file if it already exists.
previousRender = previousRender
.then(_ =>
renderModuleFactory(AppServerModuleNgFactory, {
document: readFileSync(indexPath, 'utf8'),
url: route,
extraProviders: [provideModuleMap(LAZY_MODULE_MAP)],
}),
)
.then(html => writeFileSync(join(fullPath, 'index.html'), html));
});
}
render(ROUTES.staticPaths, BROWSER_FOLDER, CONFIG.serverApp);
export const ROUTES = {
staticPaths: [
'/',
'home',
'dummy'
],
};
{
"extends": "../../tsconfig.json", // extend your base angular tsconfig
"compilerOptions": {
"module": "commonjs"
}
}
@dannyockilson
Copy link
Author

I put these in a tools/prerender directory in the main project root then run via ts-node --project tools/prerender/tsconfig.json tools/prerender

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment