Material 2 + Angular 4 + webpack doesn't style buttons

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Buttons should appear styled as they do in the guides on material.io. e.g. https://material.angular.io/components/button/overview

What is the current behavior?

Button is default Chrome button

What are the steps to reproduce?

1. Environment is as follows: Visual Studio (Professional) 2017 version 15.4.0 ASP.NET Core 2 web application with Angular, from VS template
2. Update @angular packages to ^4.4.6 in NPM and restore packages

    "@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",

1. Per the Material guide, run the following command in the project directory:

npm install --save @angular/material @angular/cdk

1. Update webpack.config.vendor.js to add the following lines to the treeShakableModules array, just after ‘@angular/router’:

'@angular/material',
'@angular/material/prebuilt-themes/deeppurple-amber.css',

1. In app.module.browser.ts, import the module:

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

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

1. In home.component.html, add the following line at the end of the file:

<button mat-raised-button>This is a button</button>

1. From the project directory, run webpack to update the vendor files:

webpack --config webpack.config.vendor.js

1. Build and run the application
2. Observe the home page button is not styled. There are no errors in the console suggesting missing styles or invalid attributes.

What is the use-case or motivation for changing an existing behavior?

ASP.NET Core 2 with Angular 4 and Material 2 should be a core scenario. Most tutorials focus on SystemJS but ignore webpack. However, it seems like this should all “just work” and there are no apparent errors

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.6 Material 2.0.0-beta.12 Windows 10 Professional TS 2.4.1 (NPM) Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Is there anything else we should know?

Verified the styles do exist, as specifying class=“mat-raised-button” on the button has an effect (though it does not look like the raised button) it does change the interior styling of the button.

I note that the attribute does not appear to have any effect on the styling or content of the output HTML (versus what I see when inspecting the elements on the guide website), suggesting that something has gone wrong with the setup of the module, but I can’t for the life of me figure out what that might be.

[ChronosWS]

I have not tried any of the other components. I don’t actually suspect a bug in the Button module, but the guide has not led me down the right path somehow, so I am hoping that someone here has gotten this to work with webpack. During my attempts I have had cases where I would get errors from modules missing when the webpack.config.vendor.js was misconfigured and not loading the @angular/material module, but these have all been apparently resolved. I no longer get any errors at all, but the attributes don’t do anything.

My goal here is to get the Guide improved to cover the webpack configuration (if required) as the guide already covers SystemJS.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}