Comment livrer en production notre application Angular ? - Dev to be curious

Une fois votre première version de votre application Angular prête, vous allez enfin pouvoir la livrer en production !

Buy me a coffee ! 

Mes articles te plaisent ? Achète moi un café ! :)

C’est une belle étape, émouvante : votre bébé va vivre de ses propres ailes.

Application SPA – Des fichiers javascript avant tout

Tout d’abord, vous allez dire au revoir à tous vos fichier TypeScript : ils ne servent qu’à développer votre application.

Rappelons ici que le TypeScript va permettre de générer les fichiers javascripts nécessaires pour faire fonctionner votre application dans un navigateur.

C’est vrai qu’à force de développer en TypeScript, on en oublie presque que le but c’est d’avoir des fichiers javascripts.

Ces fichiers qui vont être appelés du côté navigateur, pour faire fonctionner votre application SPA Angular.

Préparer les fichiers pour le déploiement

Une commande pour les préparer tous

Dès que vous êtes prêt-e, lancez la commande : ng build –prod

Vous allez obtenir des fichiers prêts pour être déposés sur votre serveur web

Vous obtenez les fichiers suivants :

Et ce qui est intéressant, c’est votre page SPA index.html qui est prête pour la publication, elle aussi, avec l’appel des bons fichiers javascripts :

Des erreurs possibles

Durant la préparation pour déploiement, vous allez peut être rencontrer plusieurs erreurs, détectées par le compilateur.

Exemple 1 :

Fichier environnement renseigné à l’identique pour les variables sinon :

src/app/services/trainer-calendar.service.ts(23,29): error TS2339: Property ‘apis’ does not exist on type ‘{ production: boolean; }’.

Exemple 2 :

Expected 0 arguments, but got 1. ?

<button (click)=”authenticate()” [disabled]=”isAuthenticated”>Connection</button> le $event posait problème.

https://github.com/angular/angular-cli/issues/8574

Déployer sur un serveur web

Apache, nginx ou bien IIS

Une fois vos fichiers prêts, vous n’avez plus qu’à préparer votre site web sur votre serveur web.

Le plus important étant de gérant la redirection des routes dynamiques.

Préparer la redirection des routes pour déployer votre application Angular proprement

Le site d’Angular nous invite à choisir parmi des configurations, certes minimalistes, pour faire fonctionner votre application SPA, sur l’un des serveurs web :

• Apache
• Nginx
• IIS

Voici un exemple pour IIS :

<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>

Une fois publié, que manque-t-il ?

Sachant que vous allez appeler des APIs, vous allez devoir vous assurer les points suivants :

• que vous avez bien configuré les bonnes urls dans le fichier environment.prod.ts
• les apis sont bien accessibles, et elles aussi publiées pour la production
• les apis autorisent bien l’appel depuis votre application Angular ? (mode CORS) ?

Vous avez pensé aux logs ?

Une application en production est par essence moins debuggable qu’une application en développement.

Vous avez pensé à mettre en place le log des erreurs dans votre application Angular ?

Optimiser les fichiers en production

Une fois publiée, vous pouvez remarquer que les performances ne sont pas obligatoirement au rendez-vous.

Publication en mode AOT

Par défaut, le runtime angular fonctionne en mode Just In Time (JIT), à savoir que c’est une compilation à la demande.

Par toujours super, niveau performance, n’est-ce pas ?

Il existe le mode AOT : Ahead of Time. Il permet de précompiler l’ensemble des fichiers, pour gagner en rapidité d’exécution.

En lançant la commande : ng build –prod, vous allez activer ce mode de compilation.

Ah, vous pensiez qu’il y avait une option à ajouter ? En production, c’est le mode de génération par défaut.

En développement, vous pouvez par contre l’activer avec : ng build –aot

________________

Alors ça y est, votre application tourne en production ?