Jak używać materiału kątowego z szablonami SPA VS2017

Question

Buduję aplikację Angular2 przy użyciu szablonów SPA i JavaScriptServices dostarczanych przez firmę Microsoft (https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/).

Chciałbym użyć Angular Material, a nie Bootstrap do stylizacji/rysowania, ale nie mogę go uruchomić.

Podążając za instrukcją instalacji (https://material.angular.io/guide/getting-started) jest dość prosta, jednak jeśli chodzi o dołączanie zasobów kompozycji (@ kątowe/materiałowe/wstępnie zbudowane-motywy/...) z pakietu npm w wynikowym wydruku wwwroot, aby je dostępne dla aplikacji Jestem kompletnie zagubiony.

Zakładam, że jest to po prostu przypadek modyfikacji konfiguracji WebPack, jednak po godzinie lub dwóch majsterkowania i wyszukiwania w Google nie jestem bliżej zrozumienia, co robić.

Czy ktoś może wskazać mi właściwy kierunek?

NB. Proszę nie sugerować kopiując pliki muszę do wwwroot lub linkami do CDN itp

Answer 1

myślę, że może znaleźć bardziej kompletny/kompleksowy sposób, aby osiągnąć ten ...

1. zamknąć wizualne rozwiązanie Studio
2. Otwórz folder projektu i usunąć katalog node_modules
3. otworzyć polecenia skłonić do katalogu projektu
4. Run npm install --save @angular/material @angular/cdk w wierszu polecenia
5. Run npm install --save @angular/animations w wierszu polecenia
6. uaktualnićPakietyi rxjs do najnowszych/kompatybilnych wersji w wersji package.json. To jest ból głowy. Nie mam pojęcia, które wersje są prawidłowe i które są złe!
7. Run npm install w wierszu polecenia

8. Aktualizacji webpack.config.vendor.js, dodanie następujących dwóch wartości

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

9. Run webpack --config webpack.config.vendor.js w wierszu polecenia

10. Otwórz rozwiązanie w Visual Studio
11. zbudować rozwiązanie, po czym powinieneś być w stanie z niego skorzystać, postępując zgodnie z przewodnikiem "Pierwsze kroki" pod numerem https://material.angular.io/guide/getting-started

Sprawdziłem w wersji roboczej niejasno do GitHub - można je znaleźć w https://github.com/alterius/AngularMaterial2DotNetCoreSPA

Answer 2

W webpack.config.vendor.js dodać następujące dwa wpisy:

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

Re-run WebPack via:

webpack --config webpack.config.vendor.js

---

Source: Adding Angular Material in ASP.NET Core Angular SPA Template by Fiyaz Hasan