Question

我试图在ASP.NET Core 2 Web应用程序中使用webpack让Material 2与Angular 4.4.6一起使用。我没有错误，但我目前没有样式，mat-button属性对输出DOM没有影响。

我做了以下事情：

环境如下：
- Visual Studio（Professional）2017版15.4.0
- 使用Angular的ASP.NET Core 2 Web应用程序，来自VS模板

在NPM中将@angular软件包更新为^ 4.4.6并恢复软件包

"@angular/animations": "^4.4.6",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/compiler-cli": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/platform-server": "^4.4.6",
"@angular/router": "^4.4.6",

根据材质指南，在项目目录中运行以下命令：
```
npm install --save @angular/material @angular/cdk
```
更新webpack.config.vendor.js，将以下行添加到treeShakableModules数组中，就在＆＃39; @ angular / router＆＃39;之后：
```
'@angular/material',
'@angular/material/prebuilt-themes/deeppurple-amber.css',
```

在app.module.browser.ts中，导入模块：

import { MatButtonModule } from '@angular/material';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
      BrowserModule,
      MatButtonModule,
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})

在home.component.html中，在文件末尾添加以下行：
```
<button mat-raised-button>This is a button</button>
```
从项目目录中，运行webpack以更新供应商文件：
```
webpack --config webpack.config.vendor.js
```
构建并运行应用程序
观察主页按钮未设置样式。控制台中没有错误提示缺少样式或无效属性。

我有以下配置：

Angular 4.4.6
Material 2.0.0-beta.12
Windows 10 Professional
TypeScript 2.4.1（NPM）
Chrome版本61.0.3163.100（官方版本）（64位）

验证了 do 的样式，指定class =＆＃34; mat-raised-button＆＃34;在按钮上有一个效果（虽然它看起来不像凸起的按钮）它确实改变了按钮的内部样式。

我注意到该属性似乎对输出HTML的样式或内容没有任何影响（与我在检查指南网站上的元素时看到的情况相比），暗示某些内容模块的设置出了问题，但我不能为我的生活找出可能的结果。

编辑：根据请求，这里是webpack.config.vendor.js到样板文件：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    '@angular/cdk',
    '@angular/material',
    '@angular/material/button',
    '@angular/material/prebuilt-themes/deeppurple-amber.css',
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
]; 

const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), //     Maps these identifiers to the jQuery package (because Bootstrap expects it to be     a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,     path.join(__dirname, './ClientApp')), // Workaround for     https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,     path.join(__dirname, './ClientApp')), // Workaround for     https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for     https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

... boilerplate follows this ...

Answer 1

有点违反直觉，解决方案要求模块导入在app.module.shared.ts中完成，而不是app.module.browser.ts。如果您使用的是默认的Angular模板，请使用与上面相同的步骤（步骤5除外），执行以下操作：

编辑app.module.shared.ts以将MatButtonModule模块添加为导入，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        MatButtonModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

另请注意，没有必要将@ angular / cdk或@ angular / material /按钮添加到webpack.config.vendor.js中的模块列表中。添加指南中描述的内容就足够了。

请参阅：https://github.com/angular/material2/issues/7997

Answer 2

根据官方文件Here 您已将主题导入全局样式文件，这就像在styles.css文件中包含一行一样简单：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

或者，您也可以直接引用该文件。可用的预建主题：

deeppurple-amber.css
indigo-pink.css
粉bluegrey.css
紫green.css

Angular 4中的Material 2属性不能与webpack，ASP.NET一起使用

2 个答案: