Google Cloud Builder for Angular fails during Node SASS installation using Cloud Builders Community image

Question

Steps I've done so far:

• I've created a Google Cloud Repository
• I've created a Cloud Build Trigger and linked it to my GitHub account and repo and matched the branch name exactly ^staging$

And now per the guide I'm trying to initialize an angular builder with the following code:

git clone https://github.com/GoogleCloudPlatform/cloud-builders-community
cd cloud-builders-community/ng
gcloud builds submit --config cloudbuild.yaml .  **** ERROR HERE ****
gcloud container images list --filter ng

When I try to submit the new builder I get an error initializing node-sass. Now GCC isn't stingy with the build errors but I've condensed it here as I don't believe it's all relevant.

BUILD
Starting Step #0
Step #0: Already have image (with digest): gcr.io/cloud-builders/docker
Step #0: Sending build context to Docker daemon  8.704kB
Step #0: Step 1/4 : FROM node:current
Step #0: current: Pulling from library/node
Step #0: Digest: sha256:a1118930ecc77da1ce4b19ac8c17adf386b7bb36b348111437f1cfca5a5c9fd7
Step #0: Status: Downloaded newer image for node:current
Step #0:  ---> 9c23a8242f8b
Step #0: Step 2/4 : ARG ng_version=latest
Step #0:  ---> Running in 8571f9c93b72
Step #0: Removing intermediate container 8571f9c93b72
Step #0:  ---> ae862a663d5c
Step #0: Step 3/4 : RUN npm install -g @angular/cli@$ng_version --unsafe-perms &&     ng version
Step #0:  ---> Running in 8b6eabc3c04e
...
...
lots of npm install deprecated warnings
...
...
Step #0: npm ERR! code 1
Step #0: npm ERR! path /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass
Step #0: npm ERR! command failed
Step #0: npm ERR! command sh -c node scripts/build.js
Step #0: npm ERR! Building: /usr/local/bin/node /usr/local/lib/node_modules/@angular/cli/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
Step #0: npm ERR! make: Entering directory '/usr/local/lib/node_modules/@angular/cli/node_modules/node-sass/build'
Step #0: npm ERR!   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_GLIBCXX_USE_CXX11_ABI=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-D__STDC_FORMAT_MACROS' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.5"' -I/root/.node-gyp/16.10.0/include/node -I/root/.node-gyp/16.10.0/src -I/root/.node-gyp/16.10.0/deps/openssl/config -I/root/.node-gyp/16.10.0/deps/openssl/openssl/include -I/root/.node-gyp/16.10.0/deps/uv/include -I/root/.node-gyp/16.10.0/deps/zlib -I/root/.node-gyp/16.10.0/deps/v8/include -I../src/libsass/include  -fPIC -pthread -Wall -Wextra -Wno-unused-parameter -m64 -O3 -fno-omit-frame-pointer -std=gnu++14 -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
...
...
a lot more GCC make errors
...
...
Step #0: npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
Step #0: npm ERR! gyp ERR! build error 
Step #0: npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
Step #0: npm ERR! gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/@angular/cli/node_modules/node-gyp/lib/build.js:262:23)
Step #0: npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
Step #0: npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
Step #0: npm ERR! gyp ERR! System Linux 5.4.0-1052-gcp
Step #0: npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/@angular/cli/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
Step #0: npm ERR! gyp ERR! cwd /usr/local/lib/node_modules/@angular/cli/node_modules/node-sass
Step #0: npm ERR! gyp ERR! node -v v16.10.0
Step #0: npm ERR! gyp ERR! node-gyp -v v3.8.0
Step #0: npm ERR! gyp ERR! not ok 
Step #0: npm ERR! Build failed with error code: 1
Step #0: 
Step #0: npm ERR! A complete log of this run can be found in:
Step #0: npm ERR!     /root/.npm/_logs/2021-10-05T13_37_53_770Z-debug.log
Step #0: The command '/bin/sh -c npm install -g @angular/cli@$ng_version --unsafe-perms &&     ng version' returned a non-zero code: 1
Finished Step #0
ERROR
ERROR: build step 0 "gcr.io/cloud-builders/docker" failed: step exited with non-zero status: 1
Step #0: 
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ERROR: (gcloud.builds.submit) build c9c6d17a-e87f-449a-9901-44b786e8dd39 completed with status "FAILURE"

I'm pretty new to angular and super new to cloud building so not sure exactly where to proceed next. If I had to guess the preconfigured build image has an incompatibility between the node version and the node-sass version - at least that's what I've seen cause these kinds of issues in the past locally. But since it's a remote image I feel like it should be in a known good state.

Answer 1

Posting @anon58192932 solution for visibility:

You can follow this Medium guide that uses a generic npm image.

cloudbuild.yaml :

 steps: # Install node packages - name: 'gcr.io/cloud-builders/npm' args: [ 'install' ] # Build productive files - name: 'gcr.io/cloud-builders/npm' args: [ 'run', 'build', '--prod' ] # Deploy to google cloud app egnine - name: 'gcr.io/cloud-builders/gcloud' args: ['app', 'deploy', '--version=prod']