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:

Starting Angular 2 in ASP.NET Core with TypeScript using 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
  • 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)

DNX-Template-Project-VisualStudio2015-Project-MVC6-Angular2

  • 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  Angular2 & Ionic2 notre toute nouvelle formation pour le développement hybride sur Mobile & Smartphone.