Static html files generator for Angular Universal apps
npm install ngxstaticgeneratorNgxStaticGenerator is a highly configurable static HTML generator for Angular Universal apps.
Server side rendering is fast. Pre-rendered static files are _faster_.
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.
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 |
If a path is specified in the ngxsg.config.json, the .ts file must export an obect with the property applangs of Type Array.
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 .
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 .
NgxStaticGenerator should be installed as a general module.
`
npm install -g ngxstaticgeneratorUsage
Create a file and set the desired options.
Run ngxsg in your project folder.
See how it works for more info on how the generator works.
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