web-dev-qa-db-de.com

Wie benutzt man Angular Material mit VS2017 SPA-Vorlagen

Ich baue eine Angular2-App mit den von Microsoft bereitgestellten SPA-Vorlagen und JavaScriptServices ( https://blogs.msdn.Microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp) -net-core-with-javascriptservices/ ).

Ich würde gerne Angular Material anstelle von Bootstrap für das Styling/Theme verwenden, aber ich kann es nicht zum Laufen bringen.

Das Befolgen der Installationsanleitung ( https://material.angular.io/guide/getting-started ) ist unkompliziert genug, wenn es jedoch um das Einfügen der Themen-Assets (@ eckig/material/vorgefertigte Themen/..) geht. .) aus dem npm-Paket in der Ausgabe von wwwroot dist, um sie für die App verfügbar zu machen, bin ich völlig ratlos.

Ich gehe davon aus, dass es sich lediglich um eine Änderung der WebPack-Konfiguration handelt. Nach ein oder zwei Stunden basteln und google-Suchen kann ich nicht näher verstehen, was zu tun ist.

Kann mich jemand in die richtige Richtung weisen?

NB. Bitte schlagen Sie nicht vor, die Dateien, die ich brauche, auf das wwwroot zu kopieren oder auf ein CDN zu verlinken usw.

9
James Law

Ich denke, ich habe möglicherweise einen umfassenderen/umfassenderen Weg gefunden, um dies zu erreichen ...

  1. Schließen Sie Ihre Visual Studio-Lösung
  2. Öffnen Sie den Projektordner und löschen Sie das Verzeichnis node_modules
  3. Öffnen Sie eine Eingabeaufforderung für das Projektverzeichnis
  4. Führen Sie npm install --save @angular/material @angular/cdk in der Eingabeaufforderung aus
  5. Führen Sie npm install --save @angular/animations in der Eingabeaufforderung aus
  6. Aktualisieren Sie die Pakete @angular und rxjs auf die neuesten/kompatiblen Versionen in package.json. Das ist Kopfschmerzen. Ich habe keine Ahnung welche die richtigen Versionen sind und welche falsch sind!
  7. Führen Sie npm install in der Eingabeaufforderung aus
  8. Aktualisieren Sie webpack.config.vendor.js und fügen Sie die folgenden zwei Werte hinzu

    const nonTreeShakableModules = [
        ...
        '@angular/material',
        '@angular/material/prebuilt-themes/deeppurple-amber.css'
    ];
    
  9. Führen Sie webpack --config webpack.config.vendor.js in der Eingabeaufforderung aus

  10. Öffnen Sie die Lösung in Visual Studio
  11. Erstellen Sie die Lösung, nach der Sie sie verwenden können. Befolgen Sie die Anleitung "Erste Schritte" unter https://material.angular.io/guide/getting-started .

Ich habe eine unvollständig funktionierende Version bei GitHub eingecheckt. Diese finden Sie unter https://github.com/alterius/AngularMaterial2DotNetCoreSPA

4
James Law

Fügen Sie in webpack.config.vendor.js die folgenden zwei Einträge hinzu:

const nonTreeShakableModules = [
    ...
    "@angular/material",
    "@angular/material/prebuilt-themes/deeppurple-amber.css"
];

Führen Sie das Webpack erneut aus über:

webpack --config webpack.config.vendor.js


Quelle : Hinzufügen von Angular Material in ASP.NET Core Angular SPA-Vorlage von Fiyaz Hasan

6
spottedmahn

Es gibt jetzt eine neue Vorlage, die viel besser ist als die alte. In der alten Version von Template, die von Visual Studio bereitgestellt wird, bin ich auf viele Probleme gestoßen. Die neue Vorlage ist standardmäßig in ASP.Net Core 2.1 verfügbar. Andernfalls müssen Sie die Anweisungen unter dem folgenden Link befolgen.

https://docs.Microsoft.com/en-us/aspnet/core/spa/angular?view=aspnetcore-2.1&tabs=visual-studio

Wenn Sie nach einem Funktionsbeispiel mit EF Core 2, Angular Material und ASP.Net Core-Web-API suchen, verwenden Sie den Link unten

http://Hive.rinoy.in/building-a-web-app-using-asp-net-core-2-and-angular5-frameworks/

0
rinoy