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
:
ng add @nguniversal/express-engine --clientProject [your project name]
to initialize the server-side app module, app.server.module.tsCreate the files
prerender.ts
andstatic.paths.ts
at the root level of your project next toserver.ts
Copy the content of https://github.com/angular/universal-starter/blob/master/prerender.ts in your
prerender.ts
fileCreate your routes in your
static.paths.ts
following the example https://github.com/angular/universal-starter/blob/master/static.paths.tsAdd the prerender entry in your
webpack.server.config.js
:module.exports = { mode: 'none', entry: { server: './server.ts', prerender: './prerender.ts' },
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" }
Edit the line 17 of your
prerender.ts
byconst {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
Install the package http-server to serve the prerender build:
npm install http-server --save-dev
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