Integrieren Winkel 5 mit ASP.NET MVC 5

Habe ich nur dieses mit Winkel-5 und MVC-5. Ich schlage vor, Sie bekommen ein "Hello World" zunächst, und dann-port, es in Ihre bestehende MVC-problem.

Pre-reqs - stellen Sie sicher, dass Sie die neueste Node, NPM, AngularCLI installiert...

1. In VS2017, erstellen Sie eine Neue ASP.NET Web-Anwendung, WELLNESS-Bereich mit MVC und WebAPI 1.1. Alle Dateien anzeigen (im Projektmappen-Explorer - das macht die Sache einfacher!)

2. Aus der Paket-manager-Konsole deinstallieren Sie nicht benötigte Pakete:

   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. Entfernen Sie alle bundles in BundleConfig.cs (wir ziehen Sie in späteren!)

4. Ordner "Scripts" löschen (wird neu erstellt mit der AngularCLI)

5. Hinzufügen Eckig mit CLI (gehen Sie in die Projekt-root-Ordner)

   Run: ng new Scripts --skip-tests --style scss

   In das Projekt, schließen Sie alle Ordner AUßER node_modules!

6. Update angular.json auf die Ausgabe von Bundles Ordner -> "outputPath": "../Bundles"

7. Add-bundles:

   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. (Optional) Re-hinzufügen von Bibliotheken durch NPM (Eingabeaufforderung aus dem Ordner "Scripts"):

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

9. (Optional) Verweisen in eckigen.json so AngularCLI zieht Sie in den webpack-bundles:

   "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. Erstellen von scripts Ordner: ng build --extractCss

11. In _Layout.cshtml hinzufügen:

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

    und

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

    Entfernen Sie die alte bundle importiert!

12. In Home/Index.cshtml fügen Sie die Winkel-element:

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

    13.1 Entfernen Sie die alte bundle importiert!

13. Führen Sie das web-app - es sollte sich öffnen. Registrieren Sie einen neuen Benutzer, und dann auf login. Zeigen Sie das MVC5 demo-Seite zusammen mit der Eckigen

14. "Uhr" die Webseite - von der Befehlszeile aus:

    ng build --extractCss --watch
    

Dies wird den Bundles. Leider müssen Sie den browser aktualisieren, aber das ist besser als stop/Start Dinge!

Schreien, wenn Sie mehr detail - ich hab mich über dieses doppelt vertraut mit ihm bekommen, und es funktioniert gut!

InformationsquelleAutor James Joyce