web-dev-qa-db-fra.com

Intégration de Angular 5 à ASP.NET MVC 5

J'essaie d'intégrer une application Angular 5 générée avec un projet CLI dans une application ASP.NET MVC 5 existante. J'ai créé le projet angular avec CLI dans le projet ASP.NET MVC et je souhaite utiliser les composants Angular 5 dans des vues rasoirs. Celles-ci seront de simples vues de rasoir et à l'intérieur de celles-ci, je vais afficher quelques composants angulaires. Je l'ai fait avec ASP.NET Core 2, j'ai changé la propriété Outdir en wwwroot dans le fichier .angular-cli.json et cela a fonctionné, mais je ne pouvais pas le faire avec ASP.NET MVC 5. Quelqu'un peut-il aider? Je vous remercie 

PS: de nombreux tutoriels utilisent d'anciennes versions d'Angular et utilisaient un fichier nommé system.js, mais ce fichier n'existe plus dans les versions les plus récentes d'Angular.

angularasp.net-mvc-5
9
Haytham

Avez-vous vu la version candidate pour le nouveau modèle Microsoft Core Angular? Ils ont changé le modèle pour qu'il utilise angular-cli. Fonctionne bien. Vous pourriez éventuellement suivre le même modèle de configuration de construction. Notez que vous devez installer la dernière version du modèle via 

dotnet new --installez Microsoft.DotNet.Web.Spa.ProjectTemplates :: 2.0.0-rc1-final.

https://docs.Microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#tabpanel_IjUmMTId-R_visual-studio

4
Ali Goodnature-Wieckowicz

Je viens de faire cela avec Angular 5 et MVC 5. Je vous suggère d’obtenir un «Hello World» en premier, puis de le transférer dans votre problème MVC existant.

Prérequis - assurez-vous que vous avez la dernière version de Node, NPM, AngularCLI installée ...

  1. Dans VS2017, créez une nouvelle application Web ASP.NET, SPA avec MVC et WebAPI 1.1. Afficher tous les fichiers (dans l'Explorateur de solutions - cela facilite les choses!)

  2. Depuis la console du gestionnaire de packages, désinstallez les packages inutiles:

    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 paquets dans BundleConfig.cs (nous les récupérerons plus tard!)

  4. Supprimer le dossier Scripts (il sera recréé à l'aide de 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, incluez tous les dossiers SAUF node_modules!

  6. Mettez à jour angular.json pour générer dans un dossier Bundles -> "outputPath": "../Bundles"

  7. Ajouter des paquets:

    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) Ajoutez de nouveau des bibliothèques via NPM (invite de commande à partir du dossier Scripts):

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

  9. (Facultatif) Référencez-les dans angular.json afin qu'AngularCLI les tire dans les bundles Webpack:

    "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 du dossier de scripts: ng build --extractCss

  11. Dans _Layout.cshtml, ajoutez:

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

    et

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

    Supprimez les anciennes importations de paquets!

  12. Dans Home/Index.cshtml, ajoutez l'élément angulaire: 

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

    13.1 Supprimez les anciennes importations de paquets!

  13. Exécutez l'application Web - elle devrait s'ouvrir. Enregistrez un nouvel utilisateur, puis connectez-vous. Afficher la page de démonstration du MVC5 avec l’affichage angulaire

  14. Pour "regarder" la page Web - à partir de la ligne de commande: 

    ng build --extractCss --watch

Cela reconstruira les paquets. Malheureusement, vous devez actualiser le navigateur, mais cela vaut mieux que d'arrêter/de démarrer des choses!

Criez si vous avez besoin de plus de détails - j'ai parcouru ce document deux fois pour me familiariser avec le sujet, et cela fonctionne bien!

14
James Joyce

Solution et comment le faire en utilisant Angular 4.3 here :

1
Haytham