Comment monter une application ASP.NET Core - AngularJS - NHibernate ?

Vous êtes comme moi passé par les versions successives du Framework de développent d'applications web ASP.NET MVC4, MVC5, le Framework 4.5, 4.6.1, 4.6.2 et vous souhaitez sauter le pas directement vers ASP.NET Core 1.0 ou 1.1 alors quoi faire ? Et comment le faire ?

Ici je vais essayer de trouver les réponses à ces questions...

J'ai travaillé assez peu avec Visual Studio 2015, j'avais surtout utilisé la version pro de Visual Studio 2013, me voilà bien dérouté quand je quitte VS 2013 et MVC4 pour découvrir ce qui existe aujourd'hui. Je tente donc de choisir une série de technos stables et cohérentes.

Et je me fixe une contrainte supplémentaire, je souhaite utiliser NHibernate ...

Je trouve un projet à peu prêt équivalent sur le Code Project :

Master Chef (Part 1) ASP.NET Core MVC with Fluent NHibernate and AngularJS

Je télécharge les sources et je tente d'ouvrir la solution avec Visual Studio 2017 :

C'est une solution réalisée avec Visual Studio 2015.

Traduction de la solution vers Visual Studio 2017

La solution référence un projet .xproj. Je lance Visual Studio 2017 puis j'ouvre la solution, Visual me propose de traduire cette solution :

Je clique sur Ok :

Ouverture de la solution restauration des packages NuGet

Je compare ensuite les deux solutions, celle traduite par Visual Studio 2017 et celle livrée avec VS 2015. Je peux me rendre compte ainsi des modifications apportées lors de la traduction d'un projet, d'une solution de Visual Studio 2015 à Visual Studio 2017 :

xproj est devenu csproj

Je clique sur le projet et une commande s'exécute automatiquement : (npm pour Node Package Manager)

>Bower.cmd" install --force-latest

>npm

PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin
"C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\Bower.cmd" install --force-latest

bower angular-resource#1.5.8       not-cached https://github.com/angular/bower-angular-resource.git#1.5.8

bower angular-resource#1.5.8          resolve https://github.com/angular/bower-angular-resource.git#1.5.8

bower angular#1.5.8                not-cached https://github.com/angular/bower-angular.git#1.5.8

bower angular#1.5.8                   resolve https://github.com/angular/bower-angular.git#1.5.8

bower jquery#3.1.0                 not-cached https://github.com/jquery/jquery-dist.git#3.1.0

bower jquery#3.1.0                    resolve https://github.com/jquery/jquery-dist.git#3.1.0

bower angular-route#1.5.8          not-cached https://github.com/angular/bower-angular-route.git#1.5.8

bower angular-route#1.5.8             resolve https://github.com/angular/bower-angular-route.git#1.5.8

bower bootstrap#3.1.0              not-cached https://github.com/twbs/bootstrap.git#3.1.0

bower bootstrap#3.1.0                 resolve https://github.com/twbs/bootstrap.git#3.1.0

bower jquery#3.1.0                   checkout 3.1.0

bower angular-resource#1.5.8         checkout v1.5.8

bower angular-route#1.5.8            checkout v1.5.8

bower angular#1.5.8                  checkout v1.5.8

bower bootstrap#3.1.0                checkout v3.1.0

bower jquery#3.1.0                   resolved https://github.com/jquery/jquery-dist.git#3.1.0

bower angular-resource#1.5.8         resolved https://github.com/angular/bower-angular-resource.git#1.5.8

bower angular-route#1.5.8            resolved https://github.com/angular/bower-angular-route.git#1.5.8

bower angular#1.5.8                  resolved https://github.com/angular/bower-angular.git#1.5.8

bower bootstrap#3.1.0                progress Receiving objects:  59% (153/258), 796.00 KiB | 524.00 KiB/s

bower bootstrap#3.1.0                progress Receiving objects:  62% (160/258), 1.32 MiB | 532.00 KiB/s

bower bootstrap#3.1.0                progress Resolving deltas: 100% (20/20), done.

bower bootstrap#3.1.0                resolved https://github.com/twbs/bootstrap.git#3.1.0

bower jquery#3.1.0                    install jquery#3.1.0

bower angular-resource#1.5.8          install angular-resource#1.5.8

bower angular-route#1.5.8             install angular-route#1.5.8

bower angular#1.5.8                   install angular#1.5.8

bower bootstrap#3.1.0                 install bootstrap#3.1.0

jquery#3.1.0 wwwroot\lib\jquery

angular-resource#1.5.8 wwwroot\lib\angular-resource

└── angular#1.5.8

angular-route#1.5.8 wwwroot\lib\angular-route

└── angular#1.5.8

angular#1.5.8 wwwroot\lib\angular
bootstrap#3.1.0 wwwroot\lib\bootstrap
└── jquery#3.1.0
PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin
"C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\npm.CMD" install
npm WARN prefer global coffee-script@1.10.0 should be installed with -g
npm WARN prefer global coffee-script@1.10.0 should be installed with -g
asp.net@1.0.0 D:\Bruno\Visual Studio\Samples\ASP.NET\MasterChefWebApp\src\MasterChefWebApp
├── bower@1.7.9
├─┬ grunt@1.0.1
│ ├── coffee-script@1.10.0
│ ├─┬ dateformat@1.0.12
│ │ ├── get-stdin@4.0.1
│ │ └─┬ meow@3.7.0
│ │   ├─┬ camelcase-keys@2.1.0
│ │   │ └── camelcase@2.1.1
│ │   ├── decamelize@1.2.0
│ │   ├─┬ loud-rejection@1.6.0
│ │   │ ├─┬ currently-unhandled@0.4.1
│ │   │ │ └── array-find-index@1.0.2
│ │   │ └── signal-exit@3.0.2
│ │   ├── map-obj@1.0.1
│ │   ├── minimist@1.2.0
│ │   ├─┬ normalize-package-data@2.3.8
│ │   │ ├── hosted-git-info@2.4.2
│ │   │ ├─┬ is-builtin-module@1.0.0
│ │   │ │ └── builtin-modules@1.1.1
│ │   │ ├── semver@5.3.0
│ │   │ └─┬ validate-npm-package-license@3.0.1
│ │   │   ├─┬ spdx-correct@1.0.2
│ │   │   │ └── spdx-license-ids@1.2.2
│ │   │   └── spdx-expression-parse@1.0.4
│ │   ├── object-assign@4.1.1
│ │   ├─┬ read-pkg-up@1.0.1
│ │   │ ├─┬ find-up@1.1.2
│ │   │ │ ├── path-exists@2.1.0
│ │   │ │ └─┬ pinkie-promise@2.0.1
│ │   │ │   └── pinkie@2.0.4
│ │   │ └─┬ read-pkg@1.1.0
│ │   │   ├─┬ load-json-file@1.1.0
│ │   │   │ ├── graceful-fs@4.1.11
│ │   │   │ ├─┬ parse-json@2.2.0
│ │   │   │ │ └─┬ error-ex@1.3.1
│ │   │   │ │   └── is-arrayish@0.2.1
│ │   │   │ ├── pify@2.3.0
│ │   │   │ └─┬ strip-bom@2.0.0
│ │   │   │   └── is-utf8@0.2.1
│ │   │   └── path-type@1.1.0
│ │   ├─┬ redent@1.0.0
│ │   │ ├─┬ indent-string@2.1.0
│ │   │ │ └─┬ repeating@2.0.1
│ │   │ │   └─┬ is-finite@1.0.2
│ │   │ │     └── number-is-nan@1.0.1
│ │   │ └── strip-indent@1.0.1
│ │   └── trim-newlines@1.0.0
│ ├── eventemitter2@0.4.14
│ ├── exit@0.1.2
│ ├─┬ findup-sync@0.3.0
│ │ └── glob@5.0.15
│ ├─┬ glob@7.0.6
│ │ ├── fs.realpath@1.0.0
│ │ ├─┬ inflight@1.0.6
│ │ │ └── wrappy@1.0.2
│ │ ├── inherits@2.0.3
│ │ └── once@1.4.0
│ ├─┬ grunt-cli@1.2.0
│ │ └── resolve@1.1.7
│ ├── grunt-known-options@1.1.0
│ ├─┬ grunt-legacy-log@1.0.0
│ │ ├── colors@1.1.2
│ │ ├─┬ grunt-legacy-log-utils@1.0.0
│ │ │ └── lodash@4.3.0
│ │ ├── hooker@0.2.3
│ │ └── underscore.string@3.2.3
│ ├─┬ grunt-legacy-util@1.0.0
│ │ ├── getobject@0.1.0
│ │ ├── lodash@4.3.0
│ │ └─┬ which@1.2.14
│ │   └── isexe@2.0.0
│ ├── iconv-lite@0.4.17
│ ├─┬ js-yaml@3.5.5
│ │ ├─┬ argparse@1.0.9
│ │ │ └── sprintf-js@1.0.3
│ │ └── esprima@2.7.3
│ ├─┬ minimatch@3.0.4
│ │ └─┬ brace-expansion@1.1.7
│ │   ├── balanced-match@0.4.2
│ │   └── concat-map@0.0.1
│ ├─┬ nopt@3.0.6
│ │ └── abbrev@1.1.0
│ ├── path-is-absolute@1.0.1
│ └── rimraf@2.2.8
├─┬ grunt-contrib-uglify@2.0.0
│ ├─┬ chalk@1.1.3
│ │ ├── ansi-styles@2.2.1
│ │ ├── escape-string-regexp@1.0.5
│ │ ├─┬ has-ansi@2.0.0
│ │ │ └── ansi-regex@2.1.1
│ │ ├── strip-ansi@3.0.1
│ │ └── supports-color@2.0.0
│ ├── lodash.assign@4.2.0
│ ├─┬ maxmin@1.1.0
│ │ ├── figures@1.7.0
│ │ ├─┬ gzip-size@1.0.0
│ │ │ ├─┬ browserify-zlib@0.1.4
│ │ │ │ └── pako@0.2.9
│ │ │ └─┬ concat-stream@1.6.0
│ │ │   ├─┬ readable-stream@2.2.9
│ │ │   │ ├── buffer-shims@1.0.0
│ │ │   │ ├── core-util-is@1.0.2
│ │ │   │ ├── isarray@1.0.0
│ │ │   │ ├── process-nextick-args@1.0.7
│ │ │   │ ├── string_decoder@1.0.0
│ │ │   │ └── util-deprecate@1.0.2
│ │ │   └── typedarray@0.0.6
│ │ └── pretty-bytes@1.0.4
│ ├─┬ uglify-js@2.7.5
│ │ ├── async@0.2.10
│ │ ├── source-map@0.5.6
│ │ ├── uglify-to-browserify@1.0.2
│ │ └─┬ yargs@3.10.0
│ │   ├── camelcase@1.2.1
│ │   ├─┬ cliui@2.1.0
│ │   │ ├─┬ center-align@0.1.3
│ │   │ │ ├─┬ align-text@0.1.4
│ │   │ │ │ ├─┬ kind-of@3.2.2
│ │   │ │ │ │ └── is-buffer@1.1.5
│ │   │ │ │ ├── longest@1.0.1
│ │   │ │ │ └── repeat-string@1.6.1
│ │   │ │ └── lazy-cache@1.0.4
│ │   │ ├── right-align@0.1.3
│ │   │ └── wordwrap@0.0.2
│ │   └── window-size@0.1.0
│ └── uri-path@1.0.0
└─┬ grunt-contrib-watch@1.0.0
  ├── async@1.5.2
  ├─┬ gaze@1.1.2
  │ └─┬ globule@1.1.0
  │   ├── glob@7.1.1
  │   └── lodash@4.16.6
  ├── lodash@3.10.1
  └─┬ tiny-lr@0.2.1
    ├─┬ body-parser@1.14.2
    │ ├── bytes@2.2.0
    │ ├── content-type@1.0.2
    │ ├── depd@1.1.0
    │ ├─┬ http-errors@1.3.1
    │ │ └── statuses@1.3.1
    │ ├── iconv-lite@0.4.13
    │ ├─┬ on-finished@2.3.0
    │ │ └── ee-first@1.1.1
    │ ├── qs@5.2.0
    │ ├─┬ raw-body@2.1.7
    │ │ ├── bytes@2.4.0
    │ │ ├── iconv-lite@0.4.13
    │ │ └── unpipe@1.0.0
    │ └─┬ type-is@1.6.15
    │   ├── media-typer@0.3.0
    │   └─┬ mime-types@2.1.15
    │     └── mime-db@1.27.0
    ├─┬ debug@2.2.0
    │ └── ms@0.7.1
    ├─┬ faye-websocket@0.10.0
    │ └─┬ websocket-driver@0.6.5
    │   └── websocket-extensions@0.1.1
    ├── livereload-js@2.2.2
    ├── parseurl@1.3.1
    └── qs@5.1.0

Whaou ! On dirait bien que Fred Song (Melbourne) a automatisé un certain nombre de commandes que l'on effectuait "à la main" pour des projets précédents ...

Bower, NPM on est bien avec NodesJS, AngularJS ... le répertoire "node_modules" est apparu dans la solution :

Apparition du répertoire node_modules dans la solution Visual Studio

Dans l'article suivant :

Microsoft Visual Studio Community 2015 - Angular 2 - MVC 5

On avait vu comment installer un tas de truc Node.JS Bower dans la console cmd DOS. Ici on a l'impression que les choses se sont passées de la même façon mais dans une console Visual Studio au moment de l'ouverture et de la traduction du projet c'est à dire de façon automatique.

Mais pourtant au moment d'exécuter la solution :

Exécution BOUM !!!

Boum !!! C'est encore la cata !

J'ai IIS Express de sélectionné  :

Ajouter une légende

Je change pour MasterChefWebApp ... Encore une console DOS :

Command DOS Visual Studio 2017 exécution de l'application web ASP.NET

Puis le navigateur et enfin l'application Web :

Master Chef WebApp Exécution

On peut enfin travailler avec ASP.NET Core - AngularJS - NHibernate ... ? Ah ... Non j'ai été trop vite au bout d'un court instant c'est le plantage de l'application :

Plantage

Pas fun du tout du tout du tout du tout ! Mais n'oubliez pas que ce n'est que du soft.

Avec Visual Studio 2015 Update 3

Jusque là, j'étais avec Visual Studio 2017, le plantage vient de la mauvaise configuration de SQL Server par rapport à NHibernate mais je regarderai cela plus tard.

Je reprends une autre machine de dev. et plus calmement j'installe Visual Sutio 2015 Update 3.

Visual Sutio 2015 Update 3

Après quelques recherches, il semble qu'il faille également installer :

Microsoft ASP.NET and Web Tools - for .NET Core 1.0.1

Encore un cautère sur la jambe de bois qu'est le DotNET Framework... pfff. On tombe sur un .exe :
DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe

Des Tools, des tools encore des tools ... DotNET Core 1.0.1 Tooling for Visual Studio 2015

en Preview 2 ? Pour quoi pas ! On installe, on se retrouve avec des tool dans le répertoire :

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet

On obtient le même résultat d'exécution de "Master Chef Recipes" et le plantage du à la mauvaise configuration de NHibernate et de SQL Server.

Configuration de la chaîne de connexion

Après quelques galères concernant la création de la base de donnée MasterChef.mdf qu'il ma fallut migrer grâce à Visual Studio 2015 "Explorateur de serveurs" sans quoi crée avec SQL Server Management Studio 2012 elle était incompatible !

Après encore bien d'autres galères concernant la configuration de la chaîne de connexion, j'obtiens enfin le résultat d’exécution de l'application :

Exécution de l'application ASP.NET Core MVC - AngularJS - NHibernate

Conclusion

Que l'on utilise Visual Studio 2017 ou Visual Studio 2015 Update 3, les tools à prendre en main sont importants et très différents de ce que l'on a l'habitude mais c'est indispensable afin d'obtenir une configuration qui fonctionne.

On aura appris ici à configurer un projet ASP.NET Core MVC avec FluentNHIbernate et AngularJS.

Now Having fun !