Installation du Server Side Rending (SSR) - Angular Universal

 

Dans cet article nous allons installer Angular Universal dans un nouveau projet qui nous servira de référence. Cela permetra entre autre d'améliorer l'indexation du site dans les moteurs de recherches. De plus, il est probable que vous noterez une amélioration de la rapidité de votre site, sauf en cas de gros flux d'utilisateur.

 

Remarque : Ici, la vue est complètement séparée du back. Si vous aviez tout dans un seul et mëme projet, avec angular universal le projet sera séparé en deux, donc exécuté sur deux processus différents.

 

Attention : Si vous utilisiez des appels au service en utilisant "localhost", il sera nécessaire de les changer par l'adresse réel des services pour la mise en production.

1. Outils indispensables au préalable

Il est nécessaire d'avoir déjà installé les éléments suivant d'installé :

• Node.js : Plateforme JS
• Angular CLI :Outil fourni par angular
• Un éditeur de code, Visual studio code par exemple.

2. Création d'un projet vierge

# Création d'un répertoire d'exemple demo1
mkdir demo1

# Se positionner dans ce répertoire
cd demo1

# Création du projet
ng new mon-premier-projet

# Se positionner dans le répertoire qui a été créé
cd mon-premier-projet

# Installation des dépendances (ou librairies)
npm install

# Exécution du programme
ng serve

# Vérifiez qu'il a bien été lancé via votre navigateur à l'adresse suivante
http://localhost:4200/

3. Installation d'angular universal

# Installation
ng add @nguniversal/express-engine

Cette commande adaptera l'existant et ajoutera des modifications. Ci-dessous une liste des modifications réalisées par la commande :

• Installation des nouvelles dépendances nécessaires
• Modification du fichier main.ts
• Modification du fichier app.module.ts
• Modification du fichier angular.json
• Création du fichier src/app/app.server.module.ts
• Création du fichier src/main.server.ts
• Création du fichier server.ts
• Création du fichier tsconfig.server.json
• Modification du fichier angular.json
• Modification du fichier package.json

4. Vérification

C'est terminé, vous avez installé angular universal dans le projet. Il est temps de tester le rendu final :

# AOT Compilation
npm run build

# SSR Compilation
npm run build:ssr
npm run serve:ssr

# Vérifier que le serveur a bien été lancé à cette adresse : http://localhost:4000/

Normalement, si aucune erreur n'est apparue, vous revriez avoir pour la première réponse du serveur des informations qui seront ensuite affichées dans la page.

Exemple pour la vérification :

curl http://localhost:4000/ > ssr-resultats.txt

Curl n'exécutant pas le javascript, en ouvrant le fichier, si angular universal a bien fonctionné, vous devriez voir les mêmes informations que si angular universal n'était pas installé.

Vous pouvez également le vérifier  via votre navigateur (Chrome : ctrl + U, Firefox : F12)