Intégrer Angulaire 5 avec ASP.NET MVC 5

J'ai juste fait ce Angulaire 5 et MVC 5. Je vous suggère de trouver un "Hello World" en travaillant d'abord, puis à port déjà en place dans votre MVC problème.

Pré-reqs - assurez-vous d'avoir le dernier Nœud, NPM, AngularCLI installé...

1. Dans VS2017, créer un Nouveau ASP.NET Application Web, un SPA avec MVC et WebAPI 1.1. Afficher tous les fichiers (dans l'Explorateur de Solution - ce qui rend les choses plus faciles!)

2. De l'emballage de la console du gestionnaire de désinstaller les paquets:

   UnInstall-Package Sammy.js
   UnInstall-Package Bootstrap
   UnInstall-Package JQuery
   UnInstall-Package Knockout.validation
   UnInstall-Package Knockoutjs
   UnInstall-Package modernizr
   UnInstall-Package Microsoft.ApplicationInsights.Web -RemoveDependencies
   

3. Supprimer tous les bundles dans BundleConfig.cs (nous allons tirer dans plus tard!)

4. Supprimer le dossier Scripts (il sera recréé à l'aide de la AngularCLI)

5. Ajouter Angulaire à l'aide de la CLI (aller dans le dossier racine du projet)

   Exécuter: ng new Scripts --skip-tests --style scss

   Dans le Projet, d'Inclure tous les dossiers SAUF node_modules!

6. Mise à jour angular.json pour la sortie d'un Bundles dossier -> "outputPath": "../Bundles"

7. Ajouter des grappes de

   bundles.Add(new ScriptBundle("~/Script/Bundles") 
          .Include("~/bundles/inline.*", "~/bundles/polyfills.*", 
                   "~/bundles/scripts.*", "~/bundles/vendor.*", "~/bundles/runtime.*", 
                   "~/bundles/main.*"));
   
   bundles.Add(new StyleBundle("~/Content/Styles") .Include("~/bundles/styles.*"));
   

8. (Facultatif) ajouter de nouveau les bibliothèques par le biais de MNP (invite de commande à partir de Scripts dossier):

   npm install jquery --save   
   npm install popper.js --save    
   npm install bootstrap --save
   

9. (En option) Référence angulaire.json pour AngularCLI tire dans le webpack faisceaux:

   "styles": [
         "src/styles.scss",
         "./node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
   "scripts": [
         "./node_modules/jquery/dist/jquery.min.js",
         "./node_modules/popper.js/dist/umd/popper.min.js",
         "./node_modules/bootstrap/dist/js/bootstrap.min.js"
       ]
   

10. Construire à partir de scripts dossier: ng build --extractCss

11. Dans _Layout.cshtml, ajouter:

      @Styles.Render("~/Content/Styles")    <!-- In the "head" element -->
    

    et

      @Scripts.Render("~/Script/Bundles")   <!-- At the end of the "body" element -->
    

    Supprimer l'ancien bundle importations de!

12. Dans Home/Index.cshtml, ajouter l'Angulaire de l'élément:

    <app-root>test</app-root>
    

    13.1 Retirer l'ancien bundle importations de!

13. Exécuter l'application web, il devrait s'ouvrir. Enregistrer un nouvel utilisateur, puis ouvrez une session. Afficher la MVC5 page de démonstration en collaboration avec l'angle de

14. À "regarder" la page web à partir de la ligne de commande:

    ng build --extractCss --watch
    

Cela va reconstruire les paquets. Malheureusement, vous devez actualiser le navigateur, mais c'est mieux que d'arrêter/de départ les choses!

Crier, si vous avez besoin de plus de détails - j'ai couru à travers ce deux fois de se familiariser avec elle, et il fonctionne très bien!

OriginalL'auteur James Joyce