How to use Angular Material with VS2017 SPA Templates

Question

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

I'd like to use Angular Material as opposed to Bootstrap for styling/themeing, however I'm unable to get it to work.

Following the setup guide (https://material.angular.io/guide/getting-started) is straightforward enough, however when it comes to including the theme assets (@angular/material/prebuilt-themes/...) from the npm package in the wwwroot dist output to make them available to the app I'm at a complete loss.

I assume it's simply a case of modifying the WebPack configuration, however after an hour or two of tinkering and google searches I'm no closer to understanding what to do.

Can anybody point me in the right direction?

NB. Please don't suggest copying the files I need to the wwwroot or linking to a CDN etc.

Shamikashamma

codeproject.com/Tips/1189201/… Does this help? – Brume

Answer 1

I think I've possibly found a more complete/comprehensive way to achieve this...

1. Close your Visual Studio solution
2. Open the project folder and delete the node_modules directory
3. Open up a command prompt for the project directory
4. Run npm install --save @angular/material @angular/cdk in command prompt
5. Run npm install --save @angular/animations in command prompt
6. Upgrade the @angular and rxjs packages to the latest/compatible versions in package.json. This is a headache. I have no idea which are the right versions and which are wrong!
7. Run npm install in command prompt

8. Update webpack.config.vendor.js, adding the following two values

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

9. Run webpack --config webpack.config.vendor.js in command prompt

10. Open the solution in Visual Studio
11. Build the solution, after which you should be able to use it, having followed the "Getting Started" guide at https://material.angular.io/guide/getting-started

I've checked in a vaguely working version to GitHub - it can be found at https://github.com/alterius/AngularMaterial2DotNetCoreSPA

Shamikashamma

I’m curious, how is the above different? – Mulford

@Mulford it's complete and comprehensive. I had to fill in the gaps with your answer which was a headache. I've also included a link to a working template on GitHub with the work done. – Shamikashamma

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

Mulford

Answer 3

There is a new template available now and it is much better than the old template. I also ran into a lot of issues in the old version of template provided by Visual Studio. The new template is available in ASP.Net Core 2.1 by default else you need to follow instructions in below link.

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

If you are looking for a working example with EF Core 2, Angular Material and ASP.Net Core Web API please refer below link

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

Talent

this works as a charm with material 5 and the 2.1 template. How to update to angular material 6 ? – Oystercatcher

you can do the upgrade with npm command. npm install @angular/cli@latest @angular/compiler-cli@latest @angular/language-service@latest @types/jasmine@latest @types /jasminewd2@latest @types/node@latest --save-dev – Talent

that updates Angular Material to 6 or only Angular to 6? – Oystercatcher