如何在VS2017 SPA模板中使用Angular Material

Question

我正在使用Microsoft提供的SPA模板和JavaScript服务构建一个Angular2应用程序（https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/）。

我想使用Angular Material而不是Bootstrap来进行样式/主题化，但是我无法让它工作。

设置指南（https://material.angular.io/guide/getting-started）之后很简单，但是当涉及到wwwroot dist输出中的npm包中包含主题资源（@ angular / material / prebuilt-themes / ...）以使它们可用于应用程序时我完全失去了。

我认为这只是修改WebPack配置的一种情况，但是经过一两个小时的修补和谷歌搜索之后，我就无法理解该怎么做了。

任何人都能指出我正确的方向吗？

NB。请不要建议将我需要的文件复制到wwwroot或链接到CDN等。

Answer 1

在webpack.config.vendor.js中添加以下两个条目：

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

通过以下方式重新运行webpack：

webpack --config webpack.config.vendor.js

---

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

Answer 2

我想我可能找到了一个更完整/全面的方法来实现这个目标......

1. 关闭Visual Studio解决方案
2. 打开项目文件夹并删除node_modules目录
3. 打开项目目录的命令提示符
4. 在命令提示符下运行npm install --save @angular/material @angular/cdk
5. 在命令提示符下运行npm install --save @angular/animations
6. 将@angular和rxjs软件包升级到package.json中的最新/兼容版本。这很头疼。我不知道哪些是正确的版本，哪些是错的！
7. 在命令提示符下运行npm install
8. 更新webpack.config.vendor.js，添加以下两个值

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

9. 在命令提示符下运行webpack --config webpack.config.vendor.js
10. 在Visual Studio中打开解决方案
11. 构建解决方案，之后您应该能够使用它，遵循https://material.angular.io/guide/getting-started的“入门”指南

我已经检查了一个模糊的工作版本给GitHub - 它可以在https://github.com/alterius/AngularMaterial2DotNetCoreSPA找到

Answer 3

现在有一个新模板，它比旧模板好得多。我还在Visual Studio提供的旧版本模板中遇到了很多问题。默认情况下，新模板在ASP.Net Core 2.1中可用，否则您需要按照以下链接中的说明操作。

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

如果您正在寻找EF Core 2，Angular Material和ASP.Net Core Web API的工作示例，请参阅以下链接

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