Microsoft Visual Studio Community 2015 - Angular 2 - MVC 5

A priori, on peut faire du ASP.NET MVC 5 Angular 2 avec Visual Studio Community 2015 ... ? Vous n'êtes pas convaincu ? Alors suivez-moi. Il faut un peu de patience mais on y arrive.

ASP.NET MVC 5 Angular2

Voici la version de mon Visual Studio 2015 Community :

A propos de Microsoft Visual Studio

En cherchant dans les Templates en ligne, je trouve le template Angular2 Mvc5 sample application à installer :

Templates En ligne - Angular 2 MVC 5 sample application

En cliquant sur Informations vous trouvez : Sample Angular 2 RC1 and Mvc 5 application

On clique sur Ok, une Boite de dialogue apparaît :

Installer Angular Mvc5 sample application

En cliquant sur Installer, voici le projet que je retrouve dans mon Visual Studio :

Projet Visual Studio 2015 Community Angular 2 MVC 5

La fenêtre de sortie JS :



Java Scripts

Certains Java Scripts se sont pas enregistrés ? ... angular2 n'est pas enregistré ...

Structure du projet Angular2Mvc5Application1.csproj

Alors qu'est ce qu'il y a dans ce projet ? Comment va t-on le décortiquer que va t-on y trouver ? C'est incroyable toutes ces version d'ASP.NET MVC ça va tellement vite que l'on dirait qu'il faut attendre. A peine on commençait à travailler avec JQuery que c'est Angular JS qu'il aurait fallu installer, à peine on faisait du MVC 2 que 5 était sur le marché.

Et là encore, on est en train de se plonger dans ASP.NET MVC 5 - Angular2 - sous Visual Studo 2015 Community alors que l'on parle déjà de VS 2017 et ASP.NET Core ...

Références du projet

Qu'est ce qu'il y a dans les références de mon projet ? C'est toujours instructif de voir la part des DLL qui sont dans le Framework.NET et la part des DLL qui sont les packages.

Références du projet

Et la suite :

Références du projet -  Suite

En pointant sur Microsoft.AspNet.Identity.Core je peux voir que cette DLL est installée comme un package :

 ...\Angular2Mvc5Application1\packages\Microsoft.AspNet.Identity.Core.2.2.1\lib\net45\Microsoft.AspNet.Identity.Core.dll

Tandis que System.Security fais parti du Framework 4.5

C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.Security.dll

Les NuGets Packages du projet

En regardant dans le répertoire Packages, on trouve ceci :

ASP.NET MVC 5 - Angular2 - Packages

C'est impressionnant non ? Et franchement vous savez quoi ? Ça m'étonnerait que cela fonctionne tel quel. D'ailleurs je lance un petit coup de Build et ça crash en effet :

Génération du projet ça crash !

Il semble qu'Angular2 ne soit pas correctement installé ou même qu'un certain nombre de choses ne soient pas installées correctement ... Bref encore tout un patacaisse.

J'ai la curiosité d'ouvrir le fichier readme.md à l'intérieur des infos sur l'installation, essayons de corriger ce projet.

Correction de l'installation

Ce n'est pas gagné ! Des choses sont nouvelles Angular2 comment cela s'installe t-il ? Pourquoi cela n'a pas été fait avec l'installe du Template ?

Pour tenter de corriger cette erreur d'installation, je reviens sur la fenêtre de Sortie : Bower/npm où il m'a bien semblé voir des messages un peu curieux :

Bower/npm install angular not found !

Stack Overflow What is the difference between bower and npm ?

Ça n'est pas prêt de fonctionner tout ça, npm c'est le Nuget Package Management et Bower connais pas encore ! Je connaissais Jack Bower mais ça, c'était avant.

J'adore le message : You should bug the author to publish it 

Bien sûr ! C'est moi qui vais essayer de contacter l'auteur pour lui reporter ce bug, je n'ai que ça à faire.

Dans la suite du rapport, on peut lire :

npm ERR! 404 'angular/platform-browser' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'aspnet'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\\\node\\node" "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\Mabyre\Visual Studio\Samples\ASP.NET MVC5\Angular2Mvc5Application2\Angular2Mvc5Application2
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code E404

Allons je vais voir ce qu'il y a dans mon système à l'endroit suivant :
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node :

Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node\ node.exe

En vérité, il n'y a pas grand chose ...

Certains trucs ne sont pas installés au niveau de Node.js ... Curieux, moi je pensais que Angular remplaçait JQuery et qu'on avait pas besoin de Node, c'est un vrai fatras.

Visual Studio 2015 et Angular2 MVC

Il semble bien que ce Template ne puisse pas fonctionner sur la plateforme actuelle, il faut sans doute faire un update pour installer ce qu'il faut au niveau d'Angular ou Node.js ou les deux. J'ai fais une tentative pour double-cliquer sur l'exe : node.exe, c'est une console :

Console node.exe

Allez lire un peu de stackoverflow : C'est quoi la différence entre Bower et npm ? Et vous comprendrez qu'une fois de plus ces histoires de dépendances foutent le wilde ! C'est un scandale, au lieu de facilité la vie du dev les nugets  sont ingérables.

Not fun at all !

Dans le fichier readme.md, je lis :

Synchronize Node.JS Install Version with Visual Studio 2015

Il me faut donc installer Node.JS, il s'installe dans :
C:\Program Files\nodejs\

Installeur de NodeJS pour Windows

Puis on me dit de Synchroniser Node.JS et Visual Studio 2015

Ok ok, ras le bol ! En plus c'est à la création que tout se passe donc je supprime tout avant de récréé le projet mais rien n'y fait.

Visual Studio Community 2015 - Angular 2 - MVC 5 - La solution est proche

Je m'acharne encore un peu. Dans Node.JS : C:\Program Files\nodejs

Je vois une commande "npm" en cherchant : 'angular' is not in the npm registry

Stackoverflow me dit : angular' is not in the npm registry d'exécuter la commande >npm install dans le répertoire de mon .csproj. Alors que c'est la réponse la moins "côtée" de la page c'est pourtant ce que je vais faire. Je vois dans le path le bon chemin, je me dis que je dois pouvoir exécuter la commande :

>npm install 

Depuis une console dans le répertoire de mon projet .csproj ...

Il va alors se passer un tout un tas de trucs :

>npm install dans le répertoire de mon projet

Je n'avais jamais vu une telle procédure d'installe depuis un moment, je ne sais pas ce que j'ai installé avec Node.JS, on dirait une sorte de cache ... il semble que se soit npm !

npm est le gestionnaire de paquets officiel de Node.JS ...

on vit les modules angular ... s'installer où ? dans le cache ...

Puis cela fini par se terminer ...

Ajouter une légende

Un petit coup de Build :

Génération réussi 1

Et voici le résultat, l'application TodoList Sample Application s'exécute :

Angular2Mvc5Application Template

L'application TodoList à base d'un Template Visual Studio 2015 MVC 5 et Angular 2 fonctionne enfin. Au passage on a vu comment installer Node.JS et Angular2.

L'aspect des "cases à cocher" est tout à fait surprenant, plutôt joli, ce comportement c'est probablement de l'Angular2.

Have Fun !