Angular CLI: 7.0.3 Cannot find module 'node-sass'

[Toso82]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular` CLI: 7.0.3
Node: 11.0.0
OS: win32 x64
Angular: 7.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.3
@angular-devkit/build-angular     0.10.3
@angular-devkit/build-optimizer   0.10.3
@angular-devkit/build-webpack     0.10.3
@angular-devkit/core              7.0.3
@angular-devkit/schematics        7.0.3
@angular/cli                      7.0.3
@angular/flex-layout              7.0.0-beta.19
@angular/pwa                      0.10.3
@ngtools/webpack                  7.0.3
@schematics/angular               7.0.3
@schematics/update                0.10.3
rxjs                              6.3.3
typescript                        3.1.3
webpack                           4.19.1

Repro steps

 ng new prova
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]

ng serve

The log given by the failure

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-25T09:17:54.974Z
Hash: 98b297ee437ab1226eb2
Time: 9888ms
chunk {main} main.js, main.js.map (main) 10.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 228 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 17 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.46 MB [initial] [rendered]

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/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.Module._load (internal/modules/cjs/loader.js:513:25)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (C:\Users\Giacomo\Documents\Visual Studio 2017\Projects\Angular\prova\node_modules\sass-loader\lib\loader.js:46:72)
i ｢wdm｣: Failed to compile.

Desired functionality

Compile well

Mention any other details that might be useful

After update NodeJs and latest Angular CLI compile stop to work. I try also to delete all node_module folder and install again the package without solve.

[alan-agius4]

Which package manager are you using?

This might be because node-sass is listed in optionalDependencies. Thus any errors or failures when installing this dependency will not terminate the installation with a non zero error code.

Kindly check the console output when doing the installation, you should be getting something along SKIPPING OPTIONAL DEPENDENCY.

[Toso82]

@alan-agius4 I see now it is a problem of node-sass with NodeJS 11.

PS C:\Users\Giacomo\Documents\Visual Studio 2017\Projects\Angular\prova> npm install node-sass@latest

> node-sass@4.9.3 install C:\Users\Giacomo\Documents\Visual Studio 2017\Projects\Angular\prova\node_modules\@angular-devkit\build-angular\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-67_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-67_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> node-sass@4.9.4 install C:\Users\Giacomo\Documents\Visual Studio 2017\Projects\Angular\prova\node_modules\node-sass
> node scripts/install.js

[alan-agius4]

@Toso82 upstream issue sass/node-sass#2521, I will keep it open so that once resolved we update our dependency,

[Adam-Michalski]

I had the same problem.
I made this steps to fix it:
npm install --global windows-build-tools
After success instalation remove node_modules
and run npm install if it passes without errors which means node sass would download, extract and compile you are good to go.

ng serve

This worked for me.

[alaminfirdows]

I've run npm install --global windows-build-tools, removed node_modules folder then run npm install. But got same error.

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/lib/loader.js??ref--14-3!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass'

Can you help in another way?

[akehir]

@alaminfirdows : The easiest solution is probably just downgrading to node 10 (nvm i 10.13.0). There is another issue with building gprc with node 11, so it's not the most stable right now (grpc/grpc-node#594).

If you insist on using node 11, you can try your luck with rebuilding node sass, after your install (npm rebuild node-sass). If that works, you should be good to go - if it fails you need to fix the build from source until node-sass releases binary packages.

[clydin]

The CLI also supports dart-sass as an alternative to node-sass. If installed via npm/yarn within the project, the CLI will use it instead of node-sass. dart-sass is a pure JavaScript version of the sass/scss preprocessor.