如何在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)非常简单,但是当涉及到包含主题资源(@ angular/material/prebuilt-themes/...)时在wwwroot dist输出中的npm包使它们可用于应用程序我完全失去了.

我认为这只是修改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

来源:由Fiyaz Hasan在ASP.NET Core Angular SPA模板中添加角度材质

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中找到它