Cách sử dụng Vật liệu Góc với Mẫu SPA VS2017

Question

Tôi đang xây dựng ứng dụng Angular2 bằng các mẫu SPA và JavaScriptServices do Microsoft cung cấp (https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/).

Tôi muốn sử dụng Vật liệu góc như trái ngược với Bootstrap để tạo kiểu/tạo chủ đề, tuy nhiên tôi không thể làm cho nó hoạt động.

Thực hiện theo hướng dẫn thiết lập (https://material.angular.io/guide/getting-started) rất đơn giản, tuy nhiên khi nói đến việc bao gồm nội dung chủ đề (@ góc/vật liệu/chủ đề dựng sẵn/...) từ gói npm trong đầu ra wwwroot dist có sẵn cho các ứng dụng tôi đang ở một mất mát hoàn toàn.

Tôi cho rằng đó chỉ đơn giản là trường hợp sửa đổi cấu hình WebPack, tuy nhiên sau một hoặc hai giờ tìm kiếm tinkering và google tôi không hiểu rõ hơn về việc cần làm.

Ai có thể chỉ cho tôi đúng hướng không?

NB. Xin đừng gợi ý sao chép các tập tin tôi cần đến wwwroot hoặc liên kết đến một CDN, vv

Answer 1

Tôi nghĩ rằng tôi đã có thể tìm thấy một/cách hoàn chỉnh hơn toàn diện để đạt được điều này ...

1. Đóng bạn trực quan giải pháp Studio
2. Mở thư mục dự án và xóa các thư mục node_modules
3. Mở ra một lệnh nhắc cho thư mục dự án
4. Run npm install --save @angular/material @angular/cdk tại dấu nhắc lệnh
5. Run npm install --save @angular/animations tại dấu nhắc lệnh
6. Nâng cấp @angular và rxjs gói đến phiên bản mới nhất/tương thích trong package.json. Đây là một nhức đầu. Tôi không có ý tưởng đó là những phiên bản đúng và đó là sai!
7. Run npm install tại dấu nhắc lệnh

8. Cập nhật webpack.config.vendor.js, thêm hai giá trị sau

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

9. Run webpack --config webpack.config.vendor.js tại dấu nhắc lệnh

10. mở giải pháp trong Visual Studio
11. Xây dựng các giải pháp, sau đó bạn sẽ có thể sử dụng nó, đã làm theo hướng dẫn "Bắt đầu" tại https://material.angular.io/guide/getting-started

Tôi đã kiểm tra trong một phiên bản mơ hồ làm việc để GitHub - nó có thể được tìm thấy tại https://github.com/alterius/AngularMaterial2DotNetCoreSPA

Answer 2

Trong webpack.config.vendor.js thêm hai mục sau đây:

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

Re-chạy webpack qua:

webpack --config webpack.config.vendor.js

---

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