Update node-sass to node-sass 4.12, otherwise ng build will fail with Node 12

[dman777]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

ng build --prod breaks on node v12 because of node-sass version < 4.12

Fix is to update node-sass to 4.12

[yasinallana]

This is not only a build issue, but also happens when a new project is created

[emircansancar]

What is the solution to this problem? Now angular-cli is giving an error. Project cannot be created and compiled with scss schema.

[yasinallana]

Wait and pray, I guess ????, Though seriously I'm looking into other compilers based on node-sass, but tye thing is that node-sass is now a required dependency as opposed to optional

[dman777]

The solution is to use a node version less than 12 until this simple change is made.

[yasinallana]

They should make it optional so that we can use our own preferred sass compilers like dart sass etc.

[clydin]

node-sass is technically an optional dependency for CLI 7.x. 7.x also provides the option to use dart Sass by manually installing it within the project.

For 8.0+, the CLI has switched to using dart Sass by default with the option to use node-sass if preferred by manually installing it within the project. If using dart Sass (in either version), the fibers package will automatically be used if manually installed within the project as well.

[yasinallana]

Yeah, but there is no way to install angular cli with the latest node environment without it throwing a 404 error for node-sass, the no optional flag doesn't work either, it still tries to install node-sass despite the flag

[dman777]

How is it optional for CLI 7? I didn't specify it when I installed npm install -g @angular/cli. How would I not include it?

[yasinallana]

Umm, node-sass was an optional dependency, though from what I've been reading it seems that it's been made a required dependency, seems like downgrading to node 11 or less is the only option

[clydin]

It's a package optional dependency (7.3.8 package.json). However, it requires several steps to not install it within a project. When creating the project, use the --skip-install option. And once the project is created, manually run yarn --ignore-optional within the project directory. npm itself is broken in regards to optional dependencies and the no-optional flag will not work (npm issue).

[yasinallana]

Aaah, ok, well gonna manage via downgrade. Thank you for the suggestion though.

[9034725985]

just wanted to document how ng new fails

Details

[kus@localhost ~]$ cd /home/kus/src/personal/html
[kus@localhost html]$ node --version
v12.1.0
[kus@localhost html]$ npm --version
6.9.0
[kus@localhost html]$ node --version
v12.1.0
[kus@localhost html]$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.3.8
Node: 12.1.0
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.8
@angular-devkit/core         7.3.8
@angular-devkit/schematics   7.3.8
@schematics/angular          7.3.8
@schematics/update           0.13.8
rxjs                         6.3.3
typescript                   3.2.4
    
[kus@localhost html]$ ng new eight
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
CREATE eight/README.md (1022 bytes)
CREATE eight/.editorconfig (246 bytes)
CREATE eight/.gitignore (629 bytes)
CREATE eight/angular.json (3886 bytes)
CREATE eight/package.json (1304 bytes)
CREATE eight/tsconfig.json (435 bytes)
CREATE eight/tslint.json (1621 bytes)
CREATE eight/src/favicon.ico (5430 bytes)
CREATE eight/src/index.html (292 bytes)
CREATE eight/src/main.ts (372 bytes)
CREATE eight/src/polyfills.ts (2841 bytes)
CREATE eight/src/styles.sass (80 bytes)
CREATE eight/src/test.ts (642 bytes)
CREATE eight/src/browserslist (388 bytes)
CREATE eight/src/karma.conf.js (1018 bytes)
CREATE eight/src/tsconfig.app.json (166 bytes)
CREATE eight/src/tsconfig.spec.json (256 bytes)
CREATE eight/src/tslint.json (244 bytes)
CREATE eight/src/assets/.gitkeep (0 bytes)
CREATE eight/src/environments/environment.prod.ts (51 bytes)
CREATE eight/src/environments/environment.ts (662 bytes)
CREATE eight/src/app/app.module.ts (314 bytes)
CREATE eight/src/app/app.component.sass (0 bytes)
CREATE eight/src/app/app.component.html (1120 bytes)
CREATE eight/src/app/app.component.spec.ts (975 bytes)
CREATE eight/src/app/app.component.ts (210 bytes)
CREATE eight/e2e/protractor.conf.js (752 bytes)
CREATE eight/e2e/tsconfig.e2e.json (213 bytes)
CREATE eight/e2e/src/app.e2e-spec.ts (634 bytes)
CREATE eight/e2e/src/app.po.ts (251 bytes)
warning Error running install script for optional dependency: "/home/kus/src/personal/html/eight/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /home/kus/src/personal/html/eight/node_modules/node-sass
Output:
Building: /home/kus/.nvm/versions/node/v12.1.0/bin/node /home/kus/src/personal/html/eight/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/home/kus/.nvm/versions/node/v12.1.0/bin/node',
gyp verb cli   '/home/kus/src/personal/html/eight/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@12.1.0 | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing \"build\" directory
gyp verb command configure []
gyp verb check python checking for Python executable \"python2\" in the PATH
gyp verb `which` succeeded python2 /usr/bin/python2
gyp verb check python version `/usr/bin/python2 -c \"import sys; print \"2.7.16
gyp verb check python version .%s.%s\" % sys.version_info[:3];\"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 12.1.0
gyp verb command install [ '12.1.0' ]
gyp verb install input version string \"12.1.0\"
gyp verb install installing version: 12.1.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check \"installVersion\"
gyp verb got \"installVersion\" 9
gyp verb needs \"installVersion\" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 12.1.0
gyp verb build dir attempting to create \"build\" dir: /home/kus/src/personal/html/eight/node_modules/node-sass/build
gyp verb build dir \"build\" dir needed to be created? /home/kus/src/personal/html/eight/node_modules/node-sass/build
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: /home/kus/src/personal/html/eight/node_modules/node-sass/build/config.gypi
gyp verb config.gypi checking for gypi file: /home/kus/src/personal/html/eight/node_modules/node-sass/config.gypi
gyp verb common.gypi checking for gypi file: /home/kus/src/personal/html/eight/node_modules/node-sass/common.gypi
gyp verb gyp gyp format was not specified; forcing \"make\"
gyp info spawn /usr/bin/python2
gyp info spawn args [
gyp info spawn args   '/home/kus/src/personal/html/eight/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/home/kus/src/personal/html/eight/node_modules/node-sass/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/kus/src/personal/html/eight/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/kus/.node-gyp/12.1.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/kus/.node-gyp/12.1.0',
gyp info spawn args   '-Dnode_gyp_dir=/home/kus/src/personal/html/eight/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/home/kus/.node-gyp/12.1.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/home/kus/src/personal/html/eight/node_modules/node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp verb command build []
gyp verb build type Release
gyp verb architecture x64
gyp verb node dev dir /home/kus/.node-gyp/12.1.0
gyp verb `which` succeeded for `make` /usr/bin/make
gyp info spawn make
gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
make: Entering directory '/home/kus/src/personal/html/eight/node_modules/node-sass/build'
  g++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION=\"3.5.4\"' -I/home/kus/.node-gyp/12.1.0/include/node -I/home/kus/.node-gyp/12.1.0/src -I/home/kus/.node-gyp/12.1.0/deps/openssl/config -I/home/kus/.node-gyp/12.1.0/deps/openssl/openssl/include -I/home/kus/.node-gyp/12.1.0/deps/uv/include -I/home/kus/.node-gyp/12.1.0/deps/zlib -I/home/kus/.node-gyp/12.1.0/deps/v8/include -I../src/libsass/include  -fPIC -pthread -Wall -Wextra -Wno-unused-parameter -m64 -O3 -fno-omit-frame-pointer -std=gnu++1y -std=c++0x -fexceptions -frtti -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/ast.o.d.raw   -c -o Release/obj.target/libsass/src/libsass/src/ast.o ../src/libsass/src/ast.cpp
make: g++: Command not found
make: *** [src/libsass.target.mk:156: Release/obj.target/libsass/src/libsass/src/ast.o] Error 127
make: Leaving directory '/home/kus/src/personal/html/eight/node_modules/node-sass/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/kus/src/personal/html/eight/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:196:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Linux 5.0.11-300.fc30.x86_64
gyp ERR! command \"/home/kus/.nvm/versions/node/v12.1.0/bin/node\" \"/home/kus/src/personal/html/eight/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\" \"--verbose\" \"--libsass_ext=\" \"--libsass_cflags=\" \"--libsass_ldflags=\" \"--libsass_library=\"
gyp ERR! cwd /home/kus/src/personal/html/eight/node_modules/node-sass
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1"
    Successfully initialized git.

[yasinallana]

Please read above comments especially #14339 (comment)

[kevinvavelin]

This is a particular issue, as most of developers on osx will install node with homebrew, if they upgrade their node version they will get the 12.1 and result is that they can not create angular project anymore. Even if it is optional, it looks like somewhere one package have node-sass as a dependency and that will cause many problem :/

Edit: And I would add, if they try installing Yarn with homebrew, they will get node 12.1 as well by default.