如何将角度材料与VS2017 SPA模板一起使用

Question

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

我想使用角度材质而不是引导程序进行样式/主题设置，但是我无法让它工作。

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

我认为这只是修改 WebPack 配置的情况，但是经过一两个小时的修补和谷歌搜索后，我并没有更接近了解该怎么做。

谁能指出我正确的方向？

铌。请不要建议将我需要的文件复制到 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

---

来源：在核心角度SPA模板中添加角度材料 ASP.NET 作者：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提供的旧版本模板中也遇到了很多问题。默认情况下，新模板在 Core 2.1 ASP.Net 中可用，否则您需要按照以下链接中的说明进行操作。

https://learn.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/