How to use Angular Material with VS2017 SPA Templates
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
I think I've possibly found a more complete/comprehensive way to achieve this...
- Close your Visual Studio solution
- Open the project folder and delete the
node_modules
directory - Open up a command prompt for the project directory
- Run
npm install --save @angular/material @angular/cdk
in command prompt - Run
npm install --save @angular/animations
in command prompt - Upgrade the
@angular
andrxjs
packages to the latest/compatible versions inpackage.json
. This is a headache. I have no idea which are the right versions and which are wrong! - Run
npm install
in command prompt Update
webpack.config.vendor.js
, adding the following two valuesconst nonTreeShakableModules = [ ... '@angular/material', '@angular/material/prebuilt-themes/deeppurple-amber.css'];
Run
webpack --config webpack.config.vendor.js
in command prompt- Open the solution in Visual Studio
- 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
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://docs.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/