Informatique
Publié le 09/23/2017, rédigé par Chloé MAHALIN

@Angular/cli

Comprendre les fichiers générés lors de la création d'un nouveau projet

Prérequis, installation de @angular-cli.

Objectif

Comprendre un peu mieux l'ensemble des fichiers générés par @angular/cli lors de la création d'un nouveau projet.

L'architecture générale

Voici l'ensemble des sources générées par @angular/cli lors de la création d'un nouveau projet :

myProject
    |
    |____e2e/
    |____src/
    |     |
    |     |____app/ 
    |     |     |____app.component.css
    |     |     |____app.component.html
    |     |     |____app.component.spec.ts
    |     |     |____app.component.ts
    |     |     |____app.module.ts
    |     |____assets/
    |     |____environments/
    |     |        |____environment.prod.ts
    |     |        |____environment.ts
    |     |____favicon.ico
    |     |____index.html 
    |     |____main.ts
    |     |____polyfills.ts
    |     |____styles.css
    |     |____test.ts 
    |     |____tsconfig.app.json
    |     |____tsconfig.spec.json
    |     |____typings.d.ts
    |
    |____.angular-cli.json
    |____karma.conf.json
    |____package.json
    |____protractor.conf.json
    |____tsconfig.json
    |____tslint.json
    ...

Ni plus ni moins. Ça fait un bon gros paquet de fichiers.

Les fichiers créés et leur préoccupation

Nom du fichier Techno Fonction
Nom Usage
.angular-cli.json @angular/cli Gère des projets angular Configuration projet @angular/cli
karma.conf.js karma Test runner Configuration tests
package.json NPM Gère des projets web Configuration projet NPM
protractor.conf.js protractor Moteur de tests de chaîne Configuration protractor
tsconfig.json typescript transpileur langage typescript (super-set javascript) Configuration de la transpilation TS
tslint.json lint Analyse de code source Configuration de la convention de code
e2e/ protractor Moteur de tests de chaîne Fichiers nécessaires à protractor
src/app/app.component.css angular4 / Composant Framework de developpement web Composant racine angular
src/app/app.component.html angular4 / Composant Framework de developpement web Composant racine angular
src/app/app.component.spec.ts angular4 / test Framework de developpement web Tests associés au composant racine angular
src/app/app.component.ts angular4 / Composant Framework de developpement web Composant racine angular
src/app/app.module.ts angular4 / Moteur Framework de developpement web Fichier de déclaration des composants angular et des librairies nécessaires à l'exécution du projet
src/assets/ @angular/cli Gère des projets angular Fichiers nécessaires au projet ne nécessitant pas de transpilation (images, css, fonts, librairies js, ...)
src/environments/ @angular/cli Gère des projets angular Configuration des environnements disponibles
src/favicon.ico @angular/cli Gère des projets angular Icone par défaut de l'application
src/index.html angular4 Framework de developpement web Fichier HTML racine de l'application. Sera le premier fichier appelé
src/main.ts angular4 Framework de developpement web Fichier racine du code javascript transpilé pour démarrer l'application
src/polyfills.ts polyfills Moteur de compensation javascript dans le cas ou le navigateur ne fournit pas la fonctionnalité attendue (on pense notamment à IE) Configuration polyfills
src/styles.css angular4 Framework de developpement web Fichier de style général propre à l'application
src/test.ts angular4 Framework de developpement web Fichier racine des tests référencant l'ensemble des tests de l'application
src/tsconfig.app.json @angular/cli Gère des projets angular Configuration de la transpilation TS pour le code
src/tsconfig.spec.json @angular/cli Gère des projets angular Configuration de la transpilation TS pour les tests
src/typings.d.ts @angular/cli Gère des projets angular Définition du moteur SystemJs

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité