Angular 7 npm install error due to node-sass, node-gyp, python2 in Node v12+

Photo Courtesy: pxhere.com

Introduction

My team would almost always face errors during npm install of newly created, checked-out or cloned Angular 7 projects, especially on freshly installed OS. We would see at least one of these errors:

• Python2 not found
• Can’t find Python executable
• node-gyp requires python2
• Some node-gyp dependency unavailable
• node-sass build fails
• VC++ compiler error for some *.cpp files
• Microsoft.Cpp.Default.Props was not found
• Cannot convert argument 1 from ‘v8::Local<v8::Value>’ to ‘const v8::String::Utf8Value

We figured that this was due to an underlying problem with Angular’s internal dependencies and Node itself, but never investigated the root cause properly. Until we did. Hence this article.

Disclaimer: Firstly, I believe this issue started cropping up after Apr 2019 (Node v12). Secondly, Angular 7 was officially deprecated in June 2020. So, why bother now after almost 2 years AND for a deprecated version? That is because I faced this issue YET AGAIN yesterday. Hence, I thought I should solve it once and for all and pen-down my experience for future reference, if not anything else. Another note — this post is Windows-centric, but should be applicable to Unix-based OS too for the most part.

Root Cause Analysis

It so happens that Node v12 (Apr 2019) introduced breaking changes to node-gyp@3.8.0, and that began the domino effect. Here is the chain of dependencies that got affected, finally leading up to Angular 7 CLI.

node-gyp@3.8.0 > node-sass@4.9.x > @angular-devkit/build-angular@0.10.x which is a dev-dependency of Angular 7.x projects (generated using @angular/cli@7.x)

UPDATE 08 Mar 2021: I had the opportunity today to go one level deeper into the underlying issue as I had to do a fresh setup yet again (and I thanked God that I wrote this article earlier). NOTE: This is not required for the solution, so you may skip to the Solution directly if you are in a hurry.

After npm install, node-sass commands npm to run a post-install script located at node_modules/node-sass/scripts/install.js which tries to: Download(ing) binary from https://github.com/sass/node-sass/releases/download/v4.9.x/win32-x64–83_binding.node
(taken as-is from console).

Build artifacts for node-sass v4 are available till v4.13.1, sure. However, the particular “83” file isn’t. Why so? Looking into install.js, I found that the code that calculates “83” is process.versions.module. Digging further, I found that process.versions value gets updated whenever a C++ API changes (NodeJS → v8 engine → C++). And that’s why Node v12+ outputs a different value “83”.

Having come this far, I was tempted indeed to manually hard-code that line of code to download the “79” file (the latest-available node-sass v4.13.1 artifact), but reading the following, “ Node.js will refuse to load modules that were compiled against a different module ABI version”, discouraged me from doing so.

Solution

With the root cause now clear, I was able to solve this problem permanently using the following approach.

WARNING! Make sure you have a stable internet connection. If any step fails in between, cleaning up incompletely installed packages to start over again might become cumbersome and error-prone.

1. Install Python2* if not installed already.
2. If Python3 is also installed in your system already, then go to System Environment Variables > System Variables > Path, and ensure that the paths for Python2 take precedence over Python3 ones.
3. Install Windows Build Tools***.
   npm install --global windows-build-tools
4. Uninstall the problem package: build-angular.
   npm uninstall @angular-devkit/build-angular --save-dev
5. Uninstall node-sass.
   npm uninstall node-sass [--save|--save-dev]
   NOTE: This is required only if you installed this package in the past in an attempt to solve this particular problem and not for any intentional purpose in your Angular project.
6. Install the version of build-angular that works.
   npm install @angular-devkit/build-angular@0.13.10 --save-dev
After installation, make sure this dev-dependency is marked with ~ (patch version) prefix rather than ^ (minor version). We never want this package to update to a higher version, like 0.800.2 or 0.1002.0, else it breaks Angular CLI’s compilation process.
7. Ensure all packages are installed correctly.
   npm install
   NOTE: If this step fails, delete node_modules folder and try again.
8. Build your Angular project.
   npm start or npm run build

Solution Explanation — how it works

To see what really made it work, open node_modules/@angular-devkit/build-angular/package.json. You will see that node-sass dependency version is updated to 4.13.x (earlier it was 4.9.x). This version of node-sass uses the correct version of node-gyp that can run on Node v12 and above.

That’s all, folks!

*** — Windows Build Tools (WBT) automatically installs Python2. But, because of my experimentations while finding a fix for this issue, I ended up having both Python 2.7 and WBT (and along with it, Visual Studio Build Tools) already installed before implementing the “final fix”. So, I could not determine whether WBT was actually required or not. Hence, I have included both Steps (1 & 3) in the solution above. My guess is that you may not need WBT if you have Microsoft Visual Studio 2010 or above in your system. Do let me know in the comments about your experience.

UPDATE 08 Mar 2021: Windows Build Tools is not required. Confirmed it today. But, you can install it later if you run into Visual Studio Build Tools related issues.