Update / Mise à jours de l’article

Le temps passe vite, cette article est déjà devenu obsolète ! [DEPRECATED]
>>> Heureusement voici mon nouveau post sur le sujet <<<

Introduction

Je m’apprêtais à vous écrire un post sur comment galérer à configurer un projet from scratch sous Visual Studio 2015 avec la version bêta d’Angular 2. Pour cela je vous conseille de lire ce fabuleux tutoriel:

http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

Mais j’ai eu la bonne idée de chercher un peu, et je suis tombé sur un template de projet VS2015 qui vient tout juste de paraître ! Dites merci à Martijn van der Corput (ndlr: Dites le dans votre tête car son nom est imprononçable)

Prérequis

• Visual Studio 2015 – update 1 et la version community gratuite au minimum
• ASP.NET 5 vNext (on en est à la RC1 pour le moment)
• un browser web récent (IE11, chrome, firefox…)

Installation du template Angular 2

• Rendez vous sur DNX Angular2 Example project pour télécharger le fameux template
  • Vous pouvez en profiter pour visiter les nombreuses Extensions de la Visual Studio Gallery
• Lancez l’installation, ça ne prend que quelques secondes
• Lancez Visual Studio 2015, ouvrez un nouveau Projet / Solution
• Vous devriez voir apparaître dans Other Project Types > DNX MVC6 TypeScript Angular2 Example (aidez-vous de la barre de recherche en haut à droite)

• Après la restauration des packages via NuGet, le template génère toute la structure d’un projet compilable Angular 2 sous Visual Studio, notamment:
  • un fichier gulp.js qui sert à automatiser après le build la copie des librairies Angular2 nécessaires au projet sur le wwwroot du server (pour vous en convaincre : Ctrl + Alt + Backspace pour afficher le Task Runner Explorer)
  • un package.json accessible via le clique droit / Ouvrir sur le dossier npm des Dependencies, on remarque que celui-ci n’est pas très à jours !

Mise à jour du package.json

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "tsd": "~0.6.5",
    "angular2": "~2.0.0-beta.14",
    "systemjs": "~0.19.25",
    "reflect-metadata": "~0.1.3",
    "rxjs": "~5.0.0-beta.5"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

Pour Aller plus loin

Participez à notre formation sur  Angular & Ionic notre toute nouvelle formation pour le développement hybride sur Mobile & Smartphone.