An experimental command line tool to prerender an Angular App.
Branch: master
Clone or download
Latest commit c2a1215 Feb 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config build(config): update eslint config Feb 17, 2019
src fix: extract and test list of peer dependencies Feb 3, 2019
test/unit fix: extract and test list of peer dependencies Feb 3, 2019
.gitignore initial commit Jul 30, 2018
.travis.yml
LICENSE docs: update license file Jan 3, 2019
README.md feat: add verbose flag Nov 30, 2018
gruntfile.js style: apply linting rules Dec 19, 2018
package-lock.json 3.2.23 Feb 22, 2019
package.json 3.2.23 Feb 22, 2019

README.md

angular-prerender

An experimental command line tool to prerender an Angular App.

tests dependencies version

This command line tool is meant to simplify the build process of static Angular apps. It works by analyzing the config file created by the Angular CLI. It looks for a client and server app target defined in the angular.json file. It does then execute the server side rendering for each route and merges the ouput into the static build for the client.

Usage

angular-prerender is available on npm. It will most likely be a dev dependency of your project. The command to install it will then look like this:

npm install angular-prerender --save-dev

In case you used all the default settings of the CLI angular-prerender will be able to pick up all the necessary information on its own and can be executed by simply calling it on the command line.

angular-prerender

It is also possible to skip the explicit installation of angular-prerender and instead run it with npx like this:

npx angular-prerender

This is a complete example which will generate a very basic static Angular app called "universe".

npx --package @angular/cli ng new universe --routing
cd universe
ng generate universal --client-project universe
npm install angular-prerender --save-dev
ng build
ng run universe:server
angular-prerender

Arguments

In some scenarios angular-prerender will not be able to grab all the information by analyzing the angular.json file alone. In that case you can help it by specifying some command line arguments.

--browser-target

This lets you specify the name of the target of your client app. The Angular CLI will normally call it "build" and this is also used as a default value.

--config

The config option expects a path (including the filename) to the angular.json file of your project. By default it will look for it in the current working directory.

--parameter-values

Some URLs of your app might accept parameters. This option can be used to tell angular-prerender about the possible values those parameters could have. It expects a stringified JSON value which can be described with this TypeScript interface:

interface IParameterValuesMap {

    [ segment: string ]: string[];

}

Lets imagine your app has a route with a :name parameter in it: /team/:name. A call to angular-prerender like this would render two routes by replacing the parameter with the given values:

angular-prerender --parameter-values '{":name":["amelia","oliver"]}'
/team/amelia
/team/oliver

--server-target

This lets you specify the name of the target of your server app. The Angular CLI will normally call it "server" and this is also used as a default value.

--verbose (-v)

This flag enables more detailed log messages.

Acknowledgement

This command line tool is only possible by bringing together the great power of Angular Universal (which is now on its way into the main Angular repository) and Guess.js (which provides an excellent parser to retrieve the routes of an Angular app).