Wie richtet man angular-cli mit Visual Studio 2015 in MVC 5 ein?

Hier ist meine Lösung:

1. Behalte eine leere index.html

2. Führen Sie ng build aus, um index.html mit den injizierten Skripten und Stilen zu generieren

3. Erstellen Sie eine Gulp / Grunt-Aufgabe, um alle Links von index.html zu einer json-Datei zu extrahieren, sagen wir manifest.json (hier verwende ich Cheerio und Gulp-asset-manifest)
4. Schreiben Sie Logik, um manifest.json zu lesen und mit der Razor-Syntax
an Ihre MVC-Ansichten auszugeben

Es funktioniert perfekt für mein ASP.net MVC 5 Projekt.

Allerdings kann es nicht mit der Lazy-Ladeoperation von route arbeiten, bis publicPath unterstützt wird, da die URL für Chunk-js-Dateien aus dem Ordner "root folder not dist" geladen wird.

Zum Beispiel:

Die richtigen chunk js-Dateien sollten sein:

www.example.com/MyApp/dist/ [id] .chunk.js

Aber es wird geladen von:

www.example.com/MyApp/ [id] .chunk.js

Ich habe bereits einen PR erstellt, um pulishPath für angular-cli hinzuzufügen, um dieses Problem zu lösen.

Ссылка

Aktualisierung:

Die PR für publicPath wurde zusammengeführt, lazy loading ist kein Problem mehr.

Mein Ansatz zur Integration von Angular / CLI und MVC: Die Idee hier ist, die Front-End-Entwicklung Erfahrung von der MVC-Teil zu trennen, so dass Sie nicht mit einem der Visual Studio BS zu tun haben, und genießen Sie die Vorteile der Angular CLI und VS-Code.

Meine App ist eine Hybrid-App - die meisten Seiten und Hauptnavigation ist klassische MVC, aber einige Ansichten sind in der Tat einzelne Seiten-Anwendungen, wo die NG-App in eine bestehende Ansicht eingebettet ist.

1. Ich habe ein neues Projekt in der Lösung erstellt, um die SPAs zu speichern. (Sie können dieses Projekt vom Lösungsbuild ausschließen)
2. Im neuen Projekt habe ich ein Verzeichnis für jedes SPA erstellt. Jeder dieser Ordner ist ein Standard-CLI-Projekt (erstellt mit ng new )
3. Die Entwicklung der ng-Sachen erfolgt mit VS-Code , die die App mit ng serve bedient. Die Entwicklungserfahrung mit VS Code ist großartig!
4. Wenn wir die App in die MVC-Ansicht einbetten möchten, erstellen wir sie zuerst für prod mit ng build --prod . Dadurch werden die Bundles im Ordner dist erstellt.
5. In der MVC-App habe ich einen Ordner unter Scripts \ Frontend für jeden SPA vorbereitet

6. Eine Schluckaufgabe im MVC-Projekt ist dafür verantwortlich, die Bündel aus den SPAs dist Ordnern in die entsprechenden Ordner unter Scripts \ Frontend . Mit Task Runner wurde die Aufgabe an Before Build gebunden, sodass sie bei der Erstellung der App automatisch ausgeführt wird. Der wichtige Schluck Befehl ist:

   %Vor%

   natürlich müssen Sie die vorhandenen Dateien usw. löschen.

7. In der Bundles-Konfiguration habe ich ein Bundle für die Stile und ein Bundle für die Skripte erstellt. Da die Namen der Produktbündel mit der CLI mit Hash generiert werden, verwende ich Platzhalter:

   %Vor%

   (Beachten Sie, dass die Reihenfolge, in der Sie die Dateien zum Bundle hinzufügen, wichtig ist!)

   %Vor%

8. Fügen Sie Ihrer Ansicht nach die ng app-Direktive hinzu und verwenden Sie die Bundles:

   %Vor%

Ich verwende einen etwas anderen Ansatz als Chang Liu. Nach dem Ausführen von ng build-prod kopiere ich die Dateien in den Stammordner und ändere das href-Attribut in index.html so, dass es meinem virtuellen IIS-Verzeichnis entspricht.