Une fois votre première version de votre application Angular prête, vous allez enfin pouvoir la livrer en production !
C’est une belle étape, émouvante : votre bébé va vivre de ses propres ailes.
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.
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 :
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
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.
Le site d’Angular nous invite à choisir parmi des configurations, certes minimalistes, pour faire fonctionner votre application SPA, sur l’un des serveurs web :
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 :
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 ?
Une fois publiée, vous pouvez remarquer que les performances ne sont pas obligatoirement au rendez-vous.
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 ?