Then, it read the index.html and extract all the info of your app, styles and scripts. The index.html will be use as a template for outputing other static files.

For path rendering, you provide the path to a route. The CLI launch a server and browse to the url using Puppeteer, it extract the page content, everything inside router-outlet. Then save the final static file to its proper location.

For database rendering, the CLI fetch documents from a collection, then save HTML files to their locations.

It also output the sitemap.xml if you want.

Tutorials

Hint, use can avoid theses steps by using pre-build app with Mola.

See an example project at: https://github.com/themolacms/starter-blank

Prerequirement

Only ANGULAR, you hear me right the Angular gang.

Database render only support Firestore for now.

Database document schema must follow @lamnhan/schemata.

Add config

ngxer init

The file .ngxerrc.json is added to the project root.

Open the file and set out path and app url:

{
  "out": "...",
  "url": "..."
}

Modify index.html

See the example: https://github.com/themolacms/starter-blank/blob/main/src/index.html

Add schema to html the tag:

<html itemscope itemtype="http://schema.org/WebPage" lang="en"></html>

Add all the meta tags, see the example above:

<!-- Meta tags -->
<meta name="description" content="The Starter Blank theme preview." />
<link rel="canonical" href="https://starter-blank-preview.lamnhan.com/" />
<!-- ... -->

Note, same property tags must have the same value. For example, the tag name="description" and itemprop="description" have the same value. Tip: use VSCode Ctrl+D to select and replace all.

Modify app.component.html

The main page content must be put under a main tag, this should be the only main tag in your application.

<main id="page-container">
  <router-outlet></router-outlet>
</main>

Not recommended, if not you must specify the contentBetweens for page content extraction, again, the tag should be unique:

{
  "contentBetweens": ['</router-outlet>', '

Command overview

Tool for prerendering Angular apps

Command reference

`generate`

Generate static content.

Usage:

ngxer generate
ngxer g

`init`

Add ngxer to a project.

Usage:

ngxer init [projectPath]
ngxer i [projectPath]

Parameters:

[projectPath]: Custom path to the project

`remove`

Remove a generated content.

Usage:

ngxer remove <paths...> --keep-cache
ngxer x <paths...> --keep-cache

Parameters:

<paths...>: List of paths to be removed

Options:

-k, --keep-cache: Remove HTML file, but keep cache.

`report`

Show generated statistics.

Usage:

ngxer report --detail
ngxer r --detail

Options:

-d, --detail: Show detail.

`update`

Update a static.

Usage:

ngxer update <paths...> --live
ngxer u <paths...> --live

Parameters:

<paths...>: List of paths to be updated

Options:

-l, --live: Re-rendering with live data.

`help`

Display help.

Usage:

ngxer help

`*`

Any other command is not suppoted.

Usage:

ngxer <cmd>

License

@lamnhan/ngxer is released under the MIT license.

Keywords

node

module

cli

FAQs

What is @lamnhan/ngxer?

Is @lamnhan/ngxer well maintained?

Package last updated on 30 Sep 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@lamnhan/ngxer

@lamnhan/ngxer

Getting started

This is this for?

How does it do it?

Tutorials

Prerequirement

Add config

Modify index.html

Modify app.component.html

License

Keywords

Related posts