Input components not displaying correctly and errors in console

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Components load properly

What is the current behavior?

Errors:

material.es5.js:131 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

sassy-project/~/@angular/material/@angular/material.es5.js
Cannot find SourceMap 'pseudo-checkbox.css.map': Error: Can't resolve './pseudo-checkbox.css.map' in 
... node_modules\@angular\material\@angular'
 @ ...sassy-project/src/app/app.module.ts 13:0-119
 @ ...sassy-project/src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

All the input components (checkbox, radio, slider …) are not displaying correctly.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.

On a new project from angular-cli: ng new sassy-project --style=scss

app.module.ts

import { MdCardModule, MdCheckboxModule, MdRadioModule, MdButtonModule, MdSlideToggleModule }
 from '@angular/material';

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,

    /** Material */
    MdCardModule, MdCheckboxModule, MdRadioModule, MdButtonModule, MdSlideToggleModule
  ],

app.component.scss

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css'

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

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

@angular/cli: 1.0.0 node: 6.10.0 os: win32 x64 @angular/animations: 4.0.3 @angular/common: 4.0.3 @angular/compiler: 4.0.3 @angular/core: 4.0.3 @angular/forms: 4.0.3 @angular/http: 4.0.3 @angular/material: 2.0.0-beta.3 @angular/platform-browser: 4.0.3 @angular/platform-browser-dynamic: 4.0.3 @angular/router: 4.0.3 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.3

Is there anything else we should know?

[MikeInSwitzerland]

I had exactly the same problem today, following the Angular Materials tutorial .

In step 4, it tells you that you need to add this to your index.html file:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

This doesn’t work (on Windows 7, at least) !!! It couldn’t find this .css file, even if I copied it into the same folder as my index.html file, and tried to include it from there !

Instead, you need to add this line to your styles.css file:

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

Seriously… this stuff is exhausting…

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