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

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