Components: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css'

[OCCGU]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The webapp should be built.

What is the current behavior?

Generating a new angular project (ng new <name>) and adding angular material into it (npm install --save @angular/material @angular/cdk, npm install --save @angular/animations and adding imports as per the getting started documentation) results in an error upon ng build or ng serve:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in 'C:\Users\cgu\Documents\Projekte\pckgtest\src'
    at onError (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\Resolver.js:61:15)
    at loggingCallbackWrapper (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
    at innerCallback (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\tapable\lib\Tapable.js:252:11)
    at C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
    at innerCallback (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\tapable\lib\Tapable.js:252:11)
    at innerCallback (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\Resolver.js:144:11)
    at loggingCallbackWrapper (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\tapable\lib\Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (C:\Users\cgu\Documents\Projekte\pckgtest\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:44:6)
 @ ./src/styles.css 4:14-138
 @ multi ./src/styles.css

What are the steps to reproduce?

ng new <projectname>
cd <projectname>
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
import BrowserAnimationsModule in app.module.ts
add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in styles.css
ng build

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

Windows 7 Enterprise x64

Angular CLI: 1.6.4
Node: 6.11.4
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.4
@angular/cli: 1.6.4
@angular/material: 5.0.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.5.3
webpack: 3.10.0

Is there anything else we should know?

Removing the '~' from the theme import seems to fix the issue. I'm also getting a couple of peer dependency warnings on npm installs, since the angular version seems to be too new:
npm WARN @angular/[email protected] requires a peer of @angular/core@~5.1.1 but none was installed.
so, this may be related.

Not sure if removing the '~' has any other effects, so an update of the getting started documentation may be all that's needed

[williamBurgeson]

I came across this, having upgraded ng cli to the latest version (1.6.4) from 1.5.0.

As stated at the bottom of the comment, removing the ~ tilde does seem to have fixed this, so I believe the issue is simply that the documentation (specifically in my case https://material.angular.io/guide/getting-started#step-4-include-a-theme) needs to be updated, which should "fix" this issue.

[PeS82]

This is described here: angular/angular-cli#9185

[josephperrott]

Closing as this is an issue from within the angular cli and is being tracked there.

[Oznes]

@import "~@angular/material/prebuilt-themes/indigo-pink.css"
check to see if the import is included... I had the same problem.

[GuitarHero1969]

Same problem.
The problem is there is no intellisense or hints in styles.css as to what the path is to my node_modules like there is when doing imports to typescript compnents.

[saicharangoud]

solved issue ,instead of using
@import "~@angular/material/prebuilt-themes/indigo-pink.css"

use=>
"@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

[lucho20pt]

I had the same problem has you and I fixed it this way

`npm install --save @angular/material @angular/cdk @angular/animations`

[MohitTejwani]

for Ubuntu 18.04 user.
step 1 : npm install --save @angular/material @angular/cdk

step 2 : npm install --save @angular/animations

step 3 : import in styles.css
@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';
I hope it fixed yours also

[francves]

solved issue ,instead of using
@import "~@angular/material/prebuilt-themes/indigo-pink.css"

use=>
"@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

Thanks, this found for me!

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