13

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.

Johan Rin
  • 1,900
  • 2
  • 20
  • 42
  • You could add those scripts to your *package.json* by copying them from [here](https://github.com/angular/universal-starter/blob/master/package.json). Hard to tell if installing the `@nguniversal/express-engine` was meant to add them for you. – R. Richards Dec 07 '18 at 22:21

2 Answers2

17

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
Simply Ged
  • 8,250
  • 11
  • 32
  • 40
Johan Rin
  • 1,900
  • 2
  • 20
  • 42
  • This is exactly what I needed. Thank you very much! – marshall legend Feb 26 '19 at 03:37
  • Great @Johan! Can you tell me from where did you know how to do this? – Gaurav Ramanan Apr 14 '19 at 17:57
  • 3
    @GauravRamanan from [https://github.com/angular/angular/issues/23024](https://github.com/angular/angular/issues/23024) where I summarized all the steps. – Johan Rin Apr 14 '19 at 20:02
  • @JohanRin .. Error: ENOENT: no such file or directory, mkdir '/dist/browser/lazy/nested' This is the error that I am getting now – so-random-dude Dec 12 '19 at 13:38
  • ng --version Angular CLI: 8.3.20 Node: 12.4.0 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.803.20 @angular-devkit/core 8.3.20 @angular-devkit/schematics 8.3.20 @schematics/angular 8.3.20 @schematics/update 0.803.20 rxjs 6.4.0 – so-random-dude Dec 12 '19 at 13:39
  • Does anyone actually have a minimum working repo of this? Seems the node express version of the SSR demo looks to be depreciated on Github – Willie Dec 13 '19 at 21:25
  • The problem on my side is that when i first try to run the ```ng add @nguniversal/express-engine --clientProject [your project name]``` It doesn`t add anything, it throws an error saying ```Universal requires a project type of application``` – Csibi Norbert Sep 02 '20 at 19:26
0

[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.

Willie
  • 281
  • 3
  • 21