NgxStaticGenerator

NgxStaticGenerator is a highly configurable static HTML generator for Angular Universal apps.

Server side rendering is fast. Pre-rendered static files are faster.

Prerequisites

NgxStaticGenerator requires a working Angular Universal app to fetch on the localhost. For more info on how to implement universal rendering in an Angular app, see the official guide.

A working javascript server file to be invoked via node.

Configuration

Place in you project folder a ngxsg.config.json file with the following options:

| Option | Type | Description | Default | |----------------------|----------|------------------------------------------------------------------------|---------| | supportedLangsPath | string | optional - path to the [".ts"-".js"] file with the list of supported languages. For more info see the next paragraph langs config | undefined | | routesPath | string | required - path to the [".ts"-".js"] file with the list of the app's Routes. For more info see the next paragraph routes config | undefined | | serverDir | string | optional - name of the directory in which the server file is located. It must be a subdirectory of the project folder | dist | | serverFile | string | optional - name of the server file to be executed via node to generate the server-side rendered static files | server.js | | baseUrl | string | optional - base URL to be fetched | http://localhost:3000/ | | destinationFolder | string | optional - name of the directory in which the generated static files will be saved | static | | extension | string | optional - extension of the static files to be created | .html |

Langs config

If a path is specified in the ngxsg.config.json, the .ts file must export an obect with the property applangs of Type Array<LangDetails>.

The expected url of paths should be :lang/**.

If omitted, the files will be fetched without a :lang parameter.

interface LangDetails extends Object {
  key: string;
}

See the example file in test-app/src/app/core/translate-config/applangs.constant.ts.

Routes config

The .ts file specified in the ngxsg.config.json file must export an obect with the property routes of Type Routes:

import { Routes } from '@angular/router';

See the example file in test-app/src/app/core/app-routing/routes.constant.ts.

Installation Instructions

NgxStaticGenerator should be installed as a general module.

npm install -g ngxstaticgenerator

Usage

Create a ngxsg.config.json file and set the desired options.

Run ngxsg in your project folder.

See how it works for more info on how the generator works.

How it works

NgxStaticGenerator loops all languages set via supportedLangsPath and all paths set via routesPath and fetches the response from the server.

NgxStaticGenerator will fetch urls formatted like so: [baseUrl]/[lang]/[path]. The response should contain the fully rendered html code of each page.

NgxStaticGenerator gets the response of each fetched url and stores it in a file in [destinationFolder]/[lang]/[path].[extension]. The file is minified with html-minifier.

You can then serve html static files. Your server (Apache, NodeJS, whatever) should send to the client, for each supported language, the static file correspondign to the request. Once fully loaded, each static file will include your full Angular app.

Improvements towards v. 1.0.0

• add ability to specify the name of the object to be imported from the .ts file specified via supportedLangsPath and routesPath;
• add ability to specify the pattern of the URL to be fetched.
• add ability to provide the URL to be fetched via the ngxsg.config.json as an Array<string>.
• add ability to disable minification of the html static file.