Angular Material - Can't resolve '@angular/material/theming'

Solved:

The Angular Material 2 documentation assumes you are using sass style-sheets by default. This is never clearly communicated or explained. The steps listed below can be used to resolve this issue.

1. Rename styles.css to styles.scss and set its content to @import './app-theme';
2. In angular-cli.json, change styles: ["styles.css"] to styles: ["styles.scss"]
3. Restart npm

Angular 6+ --- Get all in one command

In Angular 6+, you simply need to install angular-material like

ng add @angular/material

What this command does? well see here

1. Installs angular material, cdk, animations
2. Adds references to the app.module.ts
3. Adds material-icons' reference to the index.html
4. It asks you to select the theme of your choice and adds reference to the angular.json (if theme does not work, import it in styles.css/styles.scss as described below)

but in previous versions, you were doing these steps manually

Angular 5

Using Angular5+, one or both import methods will work for you

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

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

Try this,

1. Change your theme file name to _app-theme.scss

2. Change your styles.css to styles.scss

3. Import your theme into the styles.scss file like:

@import './path/to/your/theme/app-theme'; // You dont need the underscore and file extention here

4. You dont need to include your theme file in angular-cli.json styles: []