Components: Material styling isn't working

[steve-todorov]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To have style

What is the current behavior?

No styling

What are the steps to reproduce?

Create a project using Angular CLI, install @angular/material and @angular/cdk, load toolbar and set color="primary" (or any other component). I've setup a simple repository using Angular CLI which you can find here which reproduces the problem. Just run npm install && ng serve. The material style is imported and is loaded but the components aren't using it for some reason. I have also tried to directly import the style as <link> in the index.html file, but that didn't work as well.

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

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.6
node: 7.10.1
os: linux x64
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

[leocaseiro]

Perhaps you need to make sure you completed Step 4 (Include a Theme)

https://material.angular.io/guide/getting-started#step-4-include-a-theme

Import on your style.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

In case you want to use Material Icons, include it on your index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Related to #5431

[jymdman]

This type of question is more suitable to be asked at stackoverflow or gitter.

But you are not importing the MdToolbarModule... Other than that your code seems fine!

[jelbourn]

As others have mentioned, this is likely either a missing theme or missing module import.

[steve-todorov]

Hi everybody, apologies for the delayed reply and thank you all for helping out. The mission module was a typo (I copied some stuff from an existing project and missed to import the toolbar module). However it appears this problem is actually not related to Material and Angular at all. For some reason PHPStorm was not killing the npm serve when I restart the task and I was actually looking at an old compiled result . Everything seems to be working just fine now (even with the testing repo).

Thank you very much for your replies!

[johnfrades]

I included a prebuilt theme and still the style didn't apply >_<

[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._}