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

jayjupdhig commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

(https://github.com/wallabyjs/public/issues/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 commented 4 years ago

"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 commented 4 years ago

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

jayjupdhig commented 4 years ago

"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 commented 4 years ago

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

jayjupdhig commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.

jayjupdhig commented 4 years ago

AND: I also opened a stackoverflow question: https://stackoverflow.com/questions/60016116/tons-of-errors-after-using-npm-install-from-verson-8-3-23-but-application-was

jayjupdhig commented 4 years ago

"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...;-)"

It seems it wont leave my mind anymore - so Angular seems to be a pretty dangerous thing! ;-)

To be zynic or sarcastic may help a lil bit in situations like that...:-)

johnkennedy9147 commented 4 years ago

Hi, this is not an npm issue.

You have installed Angular 8 globally but your project is installing angular 7 - look at your dependencies.
Angular 7 has a dependency on node-sass so npm installs node-sass.
node-sass uses precompiled binaries that are specific to the architecture of the system you are running on and the version of node you have installed.
At the time the node-sass version is released they prebuild and publish most commonly required binaries
the node version you have installed didnt exist at the time the node-sass version was released so there is no precompiled binary to download
so a post install script for node-sass tries to build it
this fails on your system
the build fails because the node-sass version is incompatible with the node version you are running

You have two options: Use node-sass version 4.12.0 or higher which will work on node 12. Or if you cannot use a different node-sass version use an earlier node version - 10.18.1 being highest that should work.

johnkennedy9147 commented 4 years ago

oh, one other thing. you have a package-lock.json in the repo. that might be pinning you to a lower version of node-saas than is necessary. you could try deleting it and re-running npm install and it might automatically use a higher version of node-saas

jayjupdhig commented 4 years ago

Hi John

Thank you very much for your answer!! :-)

"this is not an npm issue."

...OK, then i will look about it, and ask for more details on the right place.

On the angular-cli github issue page, they told me:

Angular CLI 8 no longer requires node-sass by default as it uses dart sass.

We also reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

So it seems to be an angular-cli issue, but not a bug if it is correct what they said.

With best regards, Jan

jayjupdhig commented 4 years ago

_"We also reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation."_

jayjupdhig commented 4 years ago

Last post was just a test, github.com currently seems to have a bug with italic font format, which i use to cite.

But when i click italic font on toolbar, it adds two _ on begining and end of the text. But it does not work, the _ will be shown as text...

npm / cli

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