TONS of errors after using "npm install" from Verson 8.3.23, but application was developed with 7.0.5

[jayjupdhig]

The main problem is that is seems it wants to build the package "node-sass" BY SCRATCH, which means it downloads all C/C++ files and headers and wants to build them locally (instead of downloading the already built sass.exe or whatever...) with the MS VC++ compiler from the package "windows-build-tools".

How to solve that problem?

Regards, Jan

[jayjupdhig]

First of all, i executed:

• npm install -g @angular/cli
• npm install -g windows-build-tools

1.) Then changed to the project folder, where the package.json file is.
2.) Then execute npm install

...which gave me THOUSANDS of warnings and errors.

Thank you for your feedbacks,
Jan

[jayjupdhig]

BUT: ng serve or ng build is working, it seems to transpile without any errors - even if the previous npm install has failed...?

Regards, Jan

[jayjupdhig]

"you could also install native node-sass module manually by executing npm install node-sass --save-dev and your configuration should start to work."

(wallabyjs/public#2101)

That's COMPLETELY WRONG in my case - it also tries to start the C/C++ compilation process which fails.

So what's the adequate solution for my issue?!?

[jayjupdhig]

"That's COMPLETELY WRONG in my case - it also tries to start the C/C++ compilation process which fails."

I used it without --save-dev, just with --save...

[jayjupdhig]

Same problem with --save-dev... the C/C++ compilation process will also start & fail...

[jayjupdhig]

"BUT: ng serve or ng build is working, it seems to transpile without any errors - even if the previous npm install has failed...?"

After executing "npm audix fix", "npm install" runs to the end without any errors, but it will result in a new problem: after that, "ng build" fails ...

[saper]

Would that be possible to provide some logs from your failure?

[jayjupdhig]

Thank you very much for your feedback!!

OK. I think i will better send you the "initial" problem log, not the log of problem i've described on my last post with "npm audit fix".

And what i've seen too: EVERY solution/fix/workaround i've seens in the (almost) whole internet that involves the npm command leads to the same problem... it will start again to compile the node-sass C/C++ and its header files again. But it always fails.

OK, will look about the logs. Then i will send them ASAP!

[jayjupdhig]

OK:

1.) First of all, i try to reset all global NPM packages, they are in the user profile. For that, i use a batch file. Outputs will be redirected to the nul device, i'm not interested for some error message if one or more directories don't exist:

@echo on
rd /s /q "C:\Users\%USERNAME%\AppData\Roaming\npm" > nul 2>&1
rd /s /q "C:\Users\%USERNAME%\AppData\Roaming\npm-cache" > nul 2>&1
rd /s /q "C:\Users\%USERNAME%\.windows-build-tools" > nul 2>&1
npm uninstall --global windows-build-tools > nul 2>&1

I execute that batch file as non-root with cmd.exe (Also interesting: npm uninstall --global ... breaks the batch, ... ? Because of that, it's on the last line...)

2.) Then i install the angular "basic" package again, in a global scope. In the same way, as non-root with cmd.exe:

C:\Users\user1\Desktop>npm install -g @angular/cli
C:\Users\user1\AppData\Roaming\npm\ng -> C:\Users\user1\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng

> @angular/cli@8.3.24 postinstall C:\Users\user1\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/postinstall/script.js

+ @angular/cli@8.3.24
added 251 packages from 186 contributors in 33.727s

C:\Users\user1\Desktop>

3.) After that, i change directory to the angular project in windows desktop folder. Folder content is:

C:\Users\user1\Desktop\OUR_ANGULAR_PROJECT>dir
 Datenträger in Laufwerk C: ist Windows
 Volumeseriennummer: 2061-8409

 Verzeichnis von C:\Users\user1\Desktop\OUR_ANGULAR_PROJECT

01.02.2020  10:24    <DIR>          .
01.02.2020  10:24    <DIR>          ..
31.01.2020  10:07               258 .editorconfig
01.02.2020  10:24    <DIR>          .github
31.01.2020  10:07               520 .gitignore
31.01.2020  10:07             2'602 .stylelintrc.json
31.01.2020  10:07               421 .travis.yml
01.02.2020  10:24    <DIR>          .vscode
31.01.2020  10:07             8'287 angular.json
31.01.2020  10:07             9'126 CHANGELOG.md
31.01.2020  10:07             2'035 CODE_OF_CONDUCT.md
31.01.2020  10:07             9'674 CONTRIBUTING.md
31.01.2020  10:07               101 DEV_DOCS.md
01.02.2020  10:24    <DIR>          e2e
31.01.2020  10:07             1'296 karma.conf.js
31.01.2020  10:07             1'097 LICENSE
31.01.2020  10:07           702'426 package-lock.json
31.01.2020  10:07             3'774 package.json
31.01.2020  10:07               843 protractor.conf.js
31.01.2020  10:07             4'146 README.md
01.02.2020  10:24    <DIR>          src
31.01.2020  10:07               452 tsconfig.json
31.01.2020  10:07             2'944 tslint.json
              17 Datei(en),        750'002 Bytes
               6 Verzeichnis(se), 80'135'303'168 Bytes frei

C:\Users\user1\Desktop\OUR_ANGULAR_PROJECT>

4.) Then i execute npm install in that project directory. Its output is attached as a file called npm_install_output.txt

npm_install_output.txt

5.) Then i tried to solve the problem with re-installing wthe build tool with npm install -g windows-build-tools command in a windows power-shell in root-mode. That installation process is always successful.

6.) Then executing npm install again in the project folder, same as before, with a non-root cmd.exe. Output is also attached as npm_install_after_windows_build_tools.txt

npm_install_after_windows_build_tools.txt

7.) So i already said, EVERY npm ... command i saw as a solution/fix/workaround until now leads to the same result of a failed noas-sass C/C++ complilation process.* EVEN when i try to remove node-sass (so i heard it's obsolte in Angular 8.x (our Version is 8.3.24, a few days ago it was 8.3.23), but our project was developed on Angular 7.0.5.

• Maybe the build-tools installation is an exception? ;-)

(-> So i remember, "ng build" or "ng serve" tells me something like "local project is based on Angular 7.0.5, but the global version is 8.3.24" )

8.) AND: In some constellations (i've for got the previous steps i've some, because i tried almost hunderts of things), ng serve and/or ng build are running successful to the end while the npm thing always fails.

...that's all really strange, i just need to remove some 3 social media banners from 2 simple angular sites and i'm working since days on it.

Without Angular, with a simple HTML/Javascript/CSS-based site i've developed "by scratch", without of 10000's of dependencies, it's a task of a maximum of 5 minutes. With Angular maybe a task of 5 days. Or 5 weeks, how knows? ;-)

I just realize i get angry about the whole Angular thing again, it makes me more insane from day to day... Because of that, i immediately need to stop write now, what is better for my mental health...;-)

But if you need more informations and/or logs, don't hesitate to ask me!

And thank you again for everything!!!

With best regards from Switzerland
Jan

[jayjupdhig]

Some additional informations, here is the content of angular.json :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ngx-admin-demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dashboard",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images",
                "output": "/assets/img/markers"
              }
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/typeface-exo/index.css",
              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.css",
              "node_modules/socicon/css/socicon.css",
              "node_modules/nebular-icons/scss/nebular-icons.scss",
              "node_modules/angular-tree-component/dist/angular-tree-component.css",
              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
              "node_modules/leaflet/dist/leaflet.css",
              "src/app/@theme/styles/styles.scss"
            ],
            "scripts": [
              "node_modules/pace-js/pace.min.js",
              "node_modules/tinymce/tinymce.min.js",
              "node_modules/tinymce/themes/modern/theme.min.js",
              "node_modules/tinymce/plugins/link/plugin.min.js",
              "node_modules/tinymce/plugins/paste/plugin.min.js",
              "node_modules/tinymce/plugins/table/plugin.min.js",
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts/dist/extension/bmap.min.js",
              "node_modules/chart.js/dist/Chart.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "li": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.li.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "ch": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.ch.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "net": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.net.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ngx-admin-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngx-admin-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ngx-admin-demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/pace-js/pace.min.js",
              "node_modules/tinymce/tinymce.min.js",
              "node_modules/tinymce/themes/modern/theme.min.js",
              "node_modules/tinymce/plugins/link/plugin.min.js",
              "node_modules/tinymce/plugins/paste/plugin.min.js",
              "node_modules/tinymce/plugins/table/plugin.min.js",
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts/dist/extension/bmap.min.js",
              "node_modules/chart.js/dist/Chart.min.js"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/typeface-exo/index.css",
              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/socicon/css/socicon.css",
              "node_modules/nebular-icons/scss/nebular-icons.scss",
              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
              "src/app/@theme/styles/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images",
                "output": "/assets/img/markers"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "typeCheck": true,
            "exclude": []
          }
        }
      }
    },
    "ngx-admin-demo-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ngx-admin-demo:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "ngx-admin-demo",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "ngx",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "ngx"
    }
  }
}

[jayjupdhig]

Some additional informations part II, here is the content of package.json :

{
  "name": "ngx-admin",
  "version": "3.0.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/ngx-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 11"
  ],
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/router": "^7.0.3",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "3.0.0",
    "@nebular/bootstrap": "3.0.0",
    "@nebular/security": "3.0.0",
    "@nebular/theme": "3.0.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular-tree-component": "7.2.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "^6.1.0",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "echarts": "^4.0.2",
    "eva-icons": "^1.1.0",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.1.0",
    "ng2-ckeditor": "^1.2.2",
    "ng2-completer": "2.0.8",
    "ng2-smart-table": "1.3.5",
    "ngx-echarts": "^4.0.1",
    "ngx-filter-pipe": "^2.1.2",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.3.0",
    "rxjs-compat": "6.3.0",
    "socicon": "3.0.5",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.10.2",
    "@angular/compiler-cli": "^7.0.3",
    "@angular/cli": "^7.0.3",
    "@angular/language-service": "7.0.0",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "^3.30.4",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "6.0.90",
    "codelyzer": "^4.5.0",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "5.7.0",
    "tslint-language-service": "^0.9.9",
    "typescript": "3.1.3"
  }
}

[jayjupdhig]

Some additional informations part II, here is the content of package-lock.json as an attachement because it's too big.

package-lock.txt

[jayjupdhig]

And one thing more: We need an additional package called "ngx-admin". That's the only one part that is not an "Angular-standard" component. That is what i know from the developer (ex-employee) of that angular site.