Material buttons do not get style

Question

On first entry to my /home route, my navigation buttons do not get the material style, the long chain of styles for .mat-button including min-width: 88px (I found this a very good key to search for). The style is included in vendor.bundle. It receives lots of other styles, like flex-layout etc.

When I view it from Chrome console, the style sheet is not listed among the applicable styles to the element. When I view the DOM (under elements->head), the vendor.bundle.js sheet is not listed among the loaded styles! It is loaded when I navigate to /login and stays there. After comparing home.module and login.module , I can't find any import in the latter but not in the former (other than the routing module and the private components of the two modules).

What is weird: this only happens to the /home route on initial entry. All other routes (such as /login -- both /home and /login do not have route guards) can see the material style (with wider buttons of min width 88px etc). More curious, if I navigate to any route and route back to /home, then the material styles re-appear. The only case they don't appear is when I type the /home to browser URL box.

Note that the nav buttons are part of my app.conponent, parent of home.component. I have no idea why the initial navigation to /home could have changed the style of app.component.

network trace shows that after loading /home, nothing else is loading when I switch to /login and back to /home.

config:
@angular/cli: 1.4.4
@angular/core: 4.4.4
@angular/material: 2.0.0-beta.11

The 88px I mentioned can be found at many places, including material/bundle/material.umd.js line 3744

MdButton.decorators = [...

Any suggestions on how to debug this please? this is driving me crazy.

Answer 1

To get material elements to work, you need to import MaterialModule itself:

import { MaterialModule } from '@angular/material'

And for some components, you need to import them separately, like this (for example, for buttons):

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

You can find required imports at the component's page, for buttons it will be here ("API" tab): https://material.angular.io/components/button/api

Here it is: