Add static pre-rendering to ng add @nguniversal/express-engine

Question

I added server side rendering to my Angular project by following the Angular documentation here.

I found out that the commands to run the static pre-rendering npm run build:prerender and npm run serve:prerender were not here after using the CLI command:

ng add @nguniversal/express-engine --clientProject [angular.projet]

I am wondering if the static pre-rendering is still supported in Universal? The code generated is all about dynamic SSR.

That's weird because I found these commands on the universal-starter.

Anyone have information about that? Also how can I add the static pre-rendering in my angular project?

To reproduce, run in the terminal :

• ng new foo to start a new project
• ng add @nguniversal/express-engine --clientProject foo to add universal

Thanks for help.

Answer 1

I found a way to add the static pre-rendering manually.

For those interested, all the steps to manually add the static pre-rendering to the ng add @nguniversal/express-engine:

1. ng add @nguniversal/express-engine --clientProject [your project name] to initialize the server-side app module, app.server.module.ts

2. Create the files prerender.ts and static.paths.ts at the root level of your project next to server.ts

3. Copy the content of https://github.com/angular/universal-starter/blob/master/prerender.ts in your prerender.ts file

4. Create your routes in your static.paths.ts following the example https://github.com/angular/universal-starter/blob/master/static.paths.ts

5. Add the prerender entry in your webpack.server.config.js:

   module.exports = {
     mode: 'none',
     entry: {
       server: './server.ts',
       prerender: './prerender.ts'
     },
   

6. Add the prerender scripts in your package.json:

   "scripts": {
       ...
       "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
       "generate:prerender": "cd dist && node prerender",
       "serve:prerender": "cd dist/browser && http-server"
     }
   

7. Edit the line 17 of your prerender.ts by

   const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
   

8. Install the package http-server to serve the prerender build:

   npm install http-server --save-dev
   

9. You are now ready to go!

   npm run build:prerender && npm run serve:prerender
   
   
   Starting up http-server, serving ./
   Available on:
     http://127.0.0.1:8080
     http://192.168.0.10:8080
   Hit CTRL-C to stop the server