Add static pre-rendering to ng add @nguniversal/ex

问题:

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.

回答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
   

回答2:

[Edit] Downgrading to version 0.9.0 actually seems to be the best option.

Something to tack onto the accepted answer (can't comment yet) you might run into a http-server error if you are using version .0.11.0. There is a bug with ecstatic on version 0.11.0. If you are having the problem read the thread here and check out some of the solutions. Either downgrade your version of ecstatic if you have this issue and don't want to upgrade http-server, or explicitly navigate to index.html to get your page to render.

I was very excited to get SSR up and running, but ran into this problem and it really ate up some time. I hope this helps.