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

Question

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

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

遵循设置指南(https://material.angular.io/guide/getting-started)非常简单，但是当涉及到在 wwwroot dist 输出中包含来自 npm 包的主题 Assets (@angular/material/prebuilt-themes/...)时他们对应用程序可用我完全不知所措。

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

---

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