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

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

关闭Visual Studio解决方案
打开项目文件夹并删除node_modules目录
打开项目目录的命令提示符
在命令提示符下运行npm install --save @angular/material @angular/cdk
在命令提示符下运行npm install --save @angular/animations
将@angular和rxjs个包升级到package.json中的最新/兼容版本。这很头疼。我不知道哪些是正确的版本，哪些是错的！
在命令提示符下运行npm install

更新webpack.config.vendor.js，添加以下两个值

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

在命令提示符

webpack --config webpack.config.vendor.js

在Visual Studio中打开解决方案
构建解决方案，之后您应该可以使用它，并遵循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/

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

3 个答案: