How to use Angular Material with VS2017 SPA templates

Question

I am creating an Angular2 application using SPA and JavaScriptServices templates provided by Microsoft ( https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core- with-javascriptservices / ).

I would like to use Angular Material as opposed to Bootstrap for styling / themes, but I can't get it to work.

Following the setup guide ( https://material.angular.io/guide/getting-started ) is quite simple, however, when it comes to including theme resources (@ angular / material / finished themes / ...) from the npm package wwwroot dist output to make them available to the application. I am completely lost.

I assume that this is just a case of a WebPack configuration change, however, after an hour or two of Google search and search, I’m no closer to understanding what to do.

Can someone point me in the right direction?

NB. Please do not offer to copy the files that I need for wwwroot or links to CDN, etc.

Answer 1

I think I might have found a more complete / comprehensive way to achieve this ...

• Close Solution for Visual Studio
• Open the project folder and delete the node_modules directory
• Open a command prompt for the project directory
• Run npm install --save @angular/material @angular/cdk at a command prompt
• Run npm install --save @angular/animations at the command line
• Update @angular and rxjs to the latest / compatible versions in package.json . This is a headache. I have no idea what the correct versions are and what is wrong!
• Run npm install at the command prompt

• Update webpack.config.vendor.js by adding the following two values

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

• Run webpack --config webpack.config.vendor.js at a command prompt

• Open the solution in Visual Studio
• Create a solution after which you can use it by following the Getting Started guide at https://material.angular.io/guide/getting-started

I checked the small working version of GitHub - it can be found at https://github.com/alterius/AngularMaterial2DotNetCoreSPA

Answer 2

In webpack.config.vendor.js add the following two entries:

 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 to ASP.NET Core Angular SPA Template by Fiyaz Hasan