npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lamnhan/ngxer

v0.0.6

Published

Tool for prerendering Angular apps

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lamnhanlamnhan

Keywords

nodemodulecli

Readme

@lamnhan/ngxer

Tool for prerendering Angular apps

Getting started

Install globally:

npm install -g @lamnhan/ngxer

Init the project:

ngxer init

Or, using npx:

npx @lamnhan/ngxer init

Edit .ngxerrc.json, then generate content:

ngxer generate

This is this for?

This tool is use to preprender Angular apps, so that you do not need to use SSR and can be deploy to any static hosting.

  • No SSR needed
  • I18N prerender
  • Firebase Hosting i18n supported
  • No script and legacy client
  • In-app splashcreen
  • Prerender data forwading
  • Site map generation

How does it do it?

The CLI read your configs from .ngxerrc.json file. The out property is where the ng build outputs the app to be deployed.

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>', '

Tool for prerendering Angular apps

Generate static content.

Usage:

ngxer generate
ngxer g

Add ngxer to a project.

Usage:

ngxer init [projectPath]
ngxer i [projectPath]

Parameters:

  • [projectPath]: Custom path to the project

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.

Show generated statistics.

Usage:

ngxer report --detail
ngxer r --detail

Options:

  • -d, --detail: Show detail.

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.

Display help.

Usage:

ngxer help

Any other command is not suppoted.

Usage:

ngxer <cmd>

License

@lamnhan/ngxer is released under the MIT license.