CODEWITHSUNDEEP
node.jsangularnpm
Robert
Robert

Reputation: 333

Angular won't run my ng serve - Sass Loader error

I had to reformat my windows C drive and reinstall windows now suddenly all of my angular projects I'm working on are having this issue! I've tired several things in attempt to fix it such as deleting the node modules folder in the app and nothing seems to work.

I have already attempted these fix methods and they both failed:

npm install --save-dev webpack webpack-dev-server css-loader sass-loader node-sass extract-loader file-loader

npm install --save-dev --unsafe-perm node-sass

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (E:\Work\MyApp\Eng\stage\frontend\MyApp\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
    at Object.loader (E:\Work\MyApp\Eng\stage\frontend\MyApp\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (E:\Work\MyApp\Eng\stage\frontend\MyApp\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
    at Object.loader (E:\Work\MyApp\Eng\stage\frontend\MyApp\node_modules\sass-loader\dist\index.js:36:28)
ERROR in ./src/app/welcome/welcome.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (E:\Work\MyApp\Eng\stage\frontend\MyApp\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
    at Object.loader (E:\Work\MyApp\Eng\stage\frontend\MyApp\node_modules\sass-loader\dist\index.js:36:28)

Upvotes: 1

Views: 7601

Answers (4)

creinosoLT
creinosoLT

Reputation: 1

I solved my issue by following these steps:

  1. Deleting the node_modules folder (you can do it with cmd so it won't take so long)
  2. After that npm i again
  3. Then npm i -S node-sass and it worked!

Upvotes: 0

jlang
jlang

Reputation: 1057

In my case the problem was, that I explicitly installed:

  • node-sass
  • css-loader
  • sass-loader
  • style-loader

so they were listed inside package.json dev-dependencies. After removing them from there, deleting node_modules and npm install again, my Angular app worked again.

I could imagine that Angular uses its own version of those packages and when installing them explicitly in package.json (with maybe another version) it runs into those issues (I'm probably wrong here, just an assumption).

It would explain, why swapping the OP's package.json worked for him as well.

Upvotes: 2

Robert
Robert

Reputation: 333

I am uncertain completely which item helped the most here as all of the information posted above was very useful. Ultimately deleting the package.json lock file and then completely replacing the package.json file with a separate Json file that worked on another project seems to have fixed the issue. After deleting the node_modules folder and then running npm install. Thank you everyone for your help!

Upvotes: 1

Krisztián Martinkovics
Krisztián Martinkovics

Reputation: 41

It may be because before the new Windows install you had different version of Node. You downloaded the newest node, but your node-sass is still trying to build with the old version. Try "npm rebuild node-sass --force". After running this your app should work.

Upvotes: 3

Related Questions