web-dev-qa-db-fra.com

Ajouter un pré-rendu statique à ng add @ nguniversal / express-engine

J'ai ajouté le rendu côté serveur à mon projet Angular en suivant la documentation Angular ici .

J'ai découvert que les commandes pour exécuter le pré-rendu statique npm run build:prerender et npm run serve:prerender n'était pas là après avoir utilisé la commande CLI:

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

Je me demande si le pré-rendu statique est toujours pris en charge dans Universal? Le code généré concerne la SSR dynamique.

C'est bizarre parce que j'ai trouvé ces commandes sur le niversal-starter .

Quelqu'un a des informations à ce sujet? Comment puis-je ajouter le pré-rendu statique dans mon projet angular?

Pour reproduire, exécutez dans le terminal:

  • ng new foo pour démarrer un nouveau projet
  • ng add @nguniversal/express-engine --clientProject foo pour ajouter universel

Merci pour l'aide.

angularangular-universal
9
Johan Rin

J'ai trouvé un moyen d'ajouter manuellement le pré-rendu statique.

Pour les intéressés, toutes les étapes pour ajouter manuellement le pré-rendu statique au ng add @nguniversal/express-engine:

  1. ng add @nguniversal/express-engine --clientProject [your project name] pour initialiser le module d'application côté serveur, app.server.module.ts

  2. Créez les fichiers prerender.ts et static.paths.ts au niveau racine de votre projet à côté de server.ts

  3. Copiez le contenu de https://github.com/angular/universal-starter/blob/master/prerender.ts dans votre prerender.ts fichier

  4. Créez vos itinéraires dans votre static.paths.ts en suivant l'exemple https://github.com/angular/universal-starter/blob/master/static.paths.ts

  5. Ajoutez l'entrée de pré-rendu dans votre webpack.server.config.js:

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

  6. Ajoutez les scripts de pré-rendu dans votre 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. Modifiez la ligne 17 de votre prerender.ts par

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

  8. Installez le package http-server pour servir la version prerender:

    npm install http-server --save-dev`

  9. Vous êtes maintenant prêt à partir!

    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
1
Johan Rin

[Modifier] La rétrogradation vers la version 0.9.0 semble en fait être la meilleure option.

Quelque chose à clouer sur la réponse acceptée (ne peut pas encore commenter), vous pourriez rencontrer une erreur http-server si vous utilisent la version .0.11.0 . Il existe un bug avec extatique sur la version 0.11.0. Si vous rencontrez le problème, lisez le fil ici et découvrez quelques-unes des solutions. Vous pouvez soit rétrograder votre version d'extase si vous rencontrez ce problème et que vous ne souhaitez pas mettre à niveau le serveur http, ou accédez explicitement à index.html pour obtenir le rendu de votre page.

J'étais très enthousiaste à l'idée que SSR soit opérationnel, mais j'ai rencontré ce problème et cela a vraiment pris du temps. J'espère que ça aide.

0
Willie