Error while compiling Angular Project

Question

I am new to Angular and I am trying to build a project.I am getting a weird error while compiling an angular project.I have wasted a lot of time trying to find a solution.Can anyone please help. I am using following versions:

Angular CLI: 1.6.4
Node: 8.9.4
OS: linux x64
Angular: 4.3.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.11
@angular/cli: 1.6.4
@angular/material: 2.0.0-beta.11
@angular/service-worker: 1.0.0-beta.16
@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
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.3.4
webpack-bundle-analyzer: 2.9.0
webpack: error

Following is Error:

    ERROR in ./src/app/feed/feed.component.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/app/feed'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/app/feed/feed.component.ts 144:17-49
 @ ./src/app/feed/feed.module.ts
 @ ./src/$$_gendir lazy
 @ ./node_modules/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/app/feed/feed-header/feed-header.component.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/app/feed/feed-header'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/app/feed/feed-header/feed-header.component.ts 83:17-56
 @ ./src/app/feed/feed.module.ts
 @ ./src/$$_gendir lazy
 @ ./node_modules/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/app/home/home.component.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/app/home'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/app/home/home.component.ts 90:17-49
 @ ./src/app/home/home.module.ts
 @ ./src/$$_gendir lazy
 @ ./node_modules/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/@angular/cli/node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles/main.scss
Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/home/praveen/loklak_search/src/styles'
    at onError (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/praveen/loklak_search/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/praveen/loklak_search/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/praveen/loklak_search/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
 @ ./src/styles/main.scss 4:14-224
 @ multi ./src/styles/main.scss

Anyone please help I have searched a lot for solutions online but nowhere I am getting the solution.Is something I am missing which is needed to be installed.

Answer 1

The error is pretty self explanatory :

ERROR in ./src/app/feed/feed.component.scss
Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in ['...']

This means your CSS file isn't found.

To resolve that :

• Check that the file is actually here
• If not, reinstall the package with npm install
• If it is there, check that the path provided is correct
• check the file extension

Answer 2

I think this is because they are attempting to import a .css file into a .scss file inside the main.scss file. It seems like they have followed the guide here

You can remove this reference from main.scss

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

and add it under the styles attribute in the angular-cli.json like:

"styles": [
    "styles/main.scss",
    "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]