Input components not displaying correctly and errors in console

[swaheed2]

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?

[swaheed2]

I tried so many ways of setting the theme, but they were not being applied. Including the theme file in the index.html is the only thing that fixes the problem:

 <link rel="stylesheet" type="text/css" href="../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css">;

[jymdman]

Set the theme in the style.scss file in the src dir and it should work.

You can read more about theming here:
https://github.com/angular/material2/blob/master/guides/theming.md

[alexandrehebert]

I configured everything according to the official documentation, and everything is working like a charm (i haven't checked the checkbox component, i don't need it),
BUT : same warning for me.

[valorad]

I'm having the same issue under Windows. I'm having the same warning. The styles are missing under Windows, but the same repo works fine under Unix systems.

I'm currently using @angular/cli 1.0.3, @angular/material 2.0.0-beta.5, and node-sass 4.5.3.

Below is a comparison.

[jelbourn]

Original issue is indeed a missing theme. You can include a theme css file the same you you include any other css file in your application.

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

[AndyBrownlie]

MikeInSwitzerland thanks, this worked for me too.

[SrikanthChebrolu]

I am also facing the same issue, But no errors in the console, Can anyone please help me.

[angular-automatic-lock-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.}