如何在VS2017 SPA模板中使用角质材料

Question

我正在构建一个Angular2应用程序，使用微软(https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/)提供的SPA模板和JavaScriptServices。

我想使用角度材料，而不是启动带的造型/主题，但我无法使它工作。

遵循设置指南(https://material.angular.io/guide/getting-started)是非常简单的，但是当涉及到包含主题资产时(@角/材料/预构建-主题/.)从www.root dist输出中的npm包中，可以将它们提供给应用程序，我完全不知所措。

我认为这只是一个修改WebPack配置的例子，但是经过一两个小时的修补和谷歌搜索，我已经无法理解该做什么了。

谁能给我指明正确的方向？

注意：请不要建议将我需要的文件复制到www.root或链接到CDN等。

Answer 1

我想我可能找到了一种更全面的方法来实现这一点.

1. 关闭Visual解决方案
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 =.‘@角/物质’，nonTreeShakableModules；
9. 在命令提示符中运行webpack --config webpack.config.vendor.js
10. 在Visual中打开解决方案
11. 构建解决方案，之后您应该能够使用它，并遵循了https://material.angular.io/guide/getting-started的“入门”指南

我在GitHub上签了一个含糊的版本--它可以在https://github.com/alterius/AngularMaterial2DotNetCoreSPA上找到

Answer 2

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

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

webpack通过以下途径重新运行：

webpack --config webpack.config.vendor.js

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

Answer 3

现在有一个新模板可用，它比旧模板要好得多。我还在Visual提供的旧版模板中遇到了许多问题。在默认情况下，新模板可以在ASP.Net Core2.1中使用，否则您需要遵循下面链接中的说明。

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

如果您正在寻找EF 2、角质材料和ASP.Net Core的工作示例，请参阅下面的链接

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