ng serve–Apprendre Angular - Dev to be curious

Après avoir créé votre projet avec ng new, ou bien l’avoir créé from scratch. Nous avons envie de le lancer au moins une fois pour le tester, et voir si tout est ok, au moins au début du projet.

C’est l’à qu’intervient ng serve.

Une présentation de ng serve

Afin de tester son application, en developpement (ou en test complet), ou bien pour le lancer en production, nous pouvons lancer la commande ng serve.

Cette commande va compiler et lancer votre application, sur un port donné !

Pour démarrer l’application, le package.json nous informe que :

“scripts”: {

“ng”: “ng”,

“start”: “ng serve”,

“build”: “ng build”,

“test”: “ng test”,

“lint”: “ng lint”,

“e2e”: “ng e2e”

},

Nous voyons que c’est bien la commande pour lancer l’application.

Comment l’utiliser ?

Dans votre commande (linux ou windows), lancez, depuis le dossier racine (où vous pouvez voir le fichier angular.json ou bien package.json, par exemple) :

ng serve

Nous obtenons, une fois la commande lancée :
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Nous notons tout de suite que votre serveur web se lance sur un port par défaut : 4200.

Ses options

• Premièrement, il peut être intéressant de changer le port : ng serve –port=4100

• Pour ouvrir la page d’accueil depuis votre navigateur par défaut (pas IE, pauvre fou ) : ng serve –open

• Vous souhaitez changer le host ? ng serve –host=mondomaine.com.
  Il détecte si le host existe :
  Provided host evanboissonnot.fr could NOT be bound. Please provide a different host address or hostname
  Error: Provided host evanboissonnot.fr could NOT be bound. Please provide a different host address or hostname

• Définir l’environnement (prod ou pas) : ng serve –prod=true
  Il nous avertit sur les risques autour de la sécurité :
  This is a simple server for use in testing or debugging Angular applications locally.
  It hasn’t been reviewed for security issues.

Et bien d’autres options !

Des questions ?

npm start ou bien ng serve ?

Si votre package.json définit une option start, npm start va l’appeler.

Donc si l’on a : start: ng serve. Il appellera cette commande :

PS > npm start

> appli@0.0.0 start /appli
> ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Peut-on utilise ng-serve pour publier un site internet en production ?

Il est fortement déconseillé d’utiliser ng serve en production !

Et même avec ng serve –prod=yes. Il s’agit ici de simuler un comportement en production, donc pour des tests e2e par exemple.

Comment publier en production alors ?

Il est préférable en fait d’utiliser la commande ng build.