Découvrir angular–Mon premier projet - Dev to be curious

Nous allons commencer sans Visual Studio pour ce premier projet Angular. Nous verrons dans de prochains articles comment le faire avec Visual Studio.

Buy me a coffee ! 

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

Avant tout, configurons le tout.

Pour suivre le projet, voici le projet github, en cours de développement.

1. Création du package.json

> scripts “build” : tsc => compilateur Type Script. –p pour project ou application.

> scripts “lite-server –c” : utilisation d’un server web light dédié pour les PWA

> scripts “starts” => lancement appli

Dans les dépendances modules

Nous allons avoir :

• “@angular/router”: “^6.0.3” : pour les routes projet

“@angular/forms”: “^6.0.3” : tout ce qui est des formulaires

Dans les dépendances dédiées au développement

Nous allons trouver :

• protractor pour les tests automatisés, dédiés pour Angular et AngularJs
• TypeScript, puisqu’en prod, nous aurons juste besoin du javascript généré

2. Le fichier systemjs.config.js

System.js est un moteur de chargement des modules EcmaScripts. Les modules javascript sont ainsi organisés et chargés automatiquement grâce à ce moteur javascript.

Le plus important dans ce fichier c’est la partie “map”. Elle permet de définir des raccourcis d’appel quand on importera nos modules.

En fait ce fichier est nécessaire si l’on n’utilise pas le Angular CLI.

3. Fichier tsconfig.json

Puis nous avons besoin de paramétrer notre moteur TypeScript avec le fichier tsconfig.json.

Nous pouvons entre autre définir si nous allons générer du javascript es5 ou es6.

Ici, nous serons sur de l’es6.

4. Préparation d’un serveur lite en local

Uniquement durant le développement, nous allons utiliser un serveur web lite : lite-server.

Nous devons ajouter un fichier bs-config.json.

5. npm install – Mise à jour des dépendances

Pour télécharger tous les modules, lancez la commande : npm install.

6. Ajout d’un premier Component

Il est tentant d‘utiliser la commande ng add component.

Or, vu que nous n’avons pas de fichier angular.json, le moteur angular CLI nous le réclame :

Local workspace file (‘angular.json’) could not be found.
Error: Local workspace file (‘angular.json’) could not be found.

En effet, nous sommes passés sur la version 6.0 d’Angular, et tout le moteur a changé.

Il nous faut ajouter un fichier : angular.json, si l’on veut utiliser le angular CLI.

7. Création dossiers src et app

Une convention adoptée pour les projets Angular : Un dossier src contenant un dossier app.

Dans src, nous allons déplacer les fichiers :

• tsconfig.json
• systemjs.config.js

Dans app, nous aurons les composants et les modules.

Prochaine étape : on crée notre module et notre composant.