Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ngx admin install - Version: 10 with Angular 14+ installation error - FIX #5991

Open
subhadipghorui opened this issue Jun 25, 2023 · 10 comments

Comments

@subhadipghorui
Copy link

Issue type

Ngx admin installation problem

Ngx Version: 10.0.0
Angular: 14+

Issue description

Current behavior:
Error in installlation

FIX

Steps

  1. Delete package-lock.json
  2. Update packege.json

{
"name": "ngx-admin",
"version": "10.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"
},
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
"start": "ng serve",
"build": "ng build",
"build:prod": "npm run build -- --configuration production --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",
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig "./src/tsconfig.app.json""
},
"dependencies": {
"@angular/animations": "^14.2.12",
"@angular/cdk": "14.2.7",
"@angular/common": "^14.2.12",
"@angular/compiler": "^14.2.12",
"@angular/core": "^14.2.12",
"@angular/forms": "^14.2.12",
"@angular/google-maps": "^14.2.7",
"@angular/platform-browser": "^14.2.12",
"@angular/platform-browser-dynamic": "^14.2.12",
"@angular/router": "^14.2.12",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "10.0.0",
"@nebular/eva-icons": "10.0.0",
"@nebular/security": "10.0.0",
"@nebular/theme": "10.0.0",
"@swimlane/ngx-charts": "^14.0.0",
"@types/ws": "^8.5.4",
"angular2-chartjs": "0.4.1",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"echarts": "^4.9.0",
"eva-icons": "^1.1.3",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "~1.2.9",
"ng2-completer": "^9.0.1",
"ng2-smart-table": "^1.6.0",
"ngx-echarts": "^4.2.2",
"node-sass": "^9.0.0",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "6.6.2",
"rxjs-compat": "6.3.0",
"socicon": "3.0.5",
"style-loader": "^1.3.0",
"tinymce": "4.5.7",
"tslib": "^2.3.1",
"typeface-exo": "0.0.22",
"web-animations-js": "^2.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.10",
"@angular-eslint/builder": "14.4.0",
"@angular-eslint/eslint-plugin": "14.4.0",
"@angular-eslint/eslint-plugin-template": "14.4.0",
"@angular-eslint/schematics": "14.4.0",
"@angular-eslint/template-parser": "14.4.0",
"@angular/cli": "^14.2.10",
"@angular/compiler-cli": "^14.2.12",
"@angular/language-service": "14.2.12",
"@compodoc/compodoc": "1.0.1",
"@fortawesome/fontawesome-free": "^5.2.0",
"@types/d3-color": "1.0.5",
"@types/jasmine": "~3.3.0",
"@types/jasminewd2": "2.0.3",
"@types/leaflet": "1.2.3",
"@types/node": "^12.12.70",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"codelyzer": "^6.0.2",
"conventional-changelog-cli": "1.3.4",
"eslint": "^8.23.0",
"husky": "0.13.3",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.19",
"karma-chrome-launcher": "~3.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.2",
"karma-jasmine-html-reporter": "^1.7.0",
"npm-run-all": "4.0.2",
"protractor": "~7.0.0",
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.2.2",
"tslint": "~6.1.0",
"tslint-language-service": "^0.9.9",
"typescript": "~4.6.4"
}
}

Run command

npm i --legacy-peer-deps
npm start

@subhadipghorui
Copy link
Author

Fixed. Requesting author to update the package.json.

@ramymabrouk
Copy link

i have done the same steps and fixed the package.json postinstall but i get an error when running npm start
the error is:
`
Build at: 2023-07-03T20:08:29.881Z - Hash: df3a6794c175991d - Time: 27815ms

Warning: /home/ramy/Documents/ngx-admin-10.0.0/node_modules/@nebular/eva-icons/fesm2020/nebular-eva-icons.mjs depends on 'eva-icons'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: node_modules/@types/ws/index.d.ts:328:18 - error TS2315: Type 'Server' is not generic.

328 server?: HTTPServer | HTTPSServer | undefined;
~~~~~~~~~~~~~

Error: node_modules/@types/ws/index.d.ts:328:34 - error TS2315: Type 'Server' is not generic.

328 server?: HTTPServer | HTTPSServer | undefined;
~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✖ Failed to compile.
`

@ramymabrouk
Copy link

i found a solution on stackoverflow, Solution: npm install -f @types/[email protected], now it is running

thank you

@justin-tse
Copy link

justin-tse commented Jul 7, 2023

Issue type

Ngx admin installation problem

Ngx Version: 10.0.0 Angular: 14+

Issue description

Current behavior: Error in installlation

FIX

Steps

  1. Delete package-lock.json
  2. Update packege.json

{
"name": "ngx-admin",
"version": "10.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"
},
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
"start": "ng serve",
"build": "ng build",
"build:prod": "npm run build -- --configuration production --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",
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig "./src/tsconfig.app.json""
},
"dependencies": {
"@angular/animations": "^14.2.12",
"@angular/cdk": "14.2.7",
"@angular/common": "^14.2.12",
"@angular/compiler": "^14.2.12",
"@angular/core": "^14.2.12",
"@angular/forms": "^14.2.12",
"@angular/google-maps": "^14.2.7",
"@angular/platform-browser": "^14.2.12",
"@angular/platform-browser-dynamic": "^14.2.12",
"@angular/router": "^14.2.12",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "10.0.0",
"@nebular/eva-icons": "10.0.0",
"@nebular/security": "10.0.0",
"@nebular/theme": "10.0.0",
"@swimlane/ngx-charts": "^14.0.0",
"@types/ws": "^8.5.4",
"angular2-chartjs": "0.4.1",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"echarts": "^4.9.0",
"eva-icons": "^1.1.3",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "~1.2.9",
"ng2-completer": "^9.0.1",
"ng2-smart-table": "^1.6.0",
"ngx-echarts": "^4.2.2",
"node-sass": "^9.0.0",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "6.6.2",
"rxjs-compat": "6.3.0",
"socicon": "3.0.5",
"style-loader": "^1.3.0",
"tinymce": "4.5.7",
"tslib": "^2.3.1",
"typeface-exo": "0.0.22",
"web-animations-js": "^2.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.10",
"@angular-eslint/builder": "14.4.0",
"@angular-eslint/eslint-plugin": "14.4.0",
"@angular-eslint/eslint-plugin-template": "14.4.0",
"@angular-eslint/schematics": "14.4.0",
"@angular-eslint/template-parser": "14.4.0",
"@angular/cli": "^14.2.10",
"@angular/compiler-cli": "^14.2.12",
"@angular/language-service": "14.2.12",
"@compodoc/compodoc": "1.0.1",
"@fortawesome/fontawesome-free": "^5.2.0",
"@types/d3-color": "1.0.5",
"@types/jasmine": "~3.3.0",
"@types/jasminewd2": "2.0.3",
"@types/leaflet": "1.2.3",
"@types/node": "^12.12.70",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"codelyzer": "^6.0.2",
"conventional-changelog-cli": "1.3.4",
"eslint": "^8.23.0",
"husky": "0.13.3",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.19",
"karma-chrome-launcher": "~3.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.2",
"karma-jasmine-html-reporter": "^1.7.0",
"npm-run-all": "4.0.2",
"protractor": "~7.0.0",
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.2.2",
"tslint": "~6.1.0",
"tslint-language-service": "^0.9.9",
"typescript": "~4.6.4"
}
}

Run command

npm i --legacy-peer-deps npm start

Thank you so much! It helps me solve the problem, after changing the package.json I can start the project.

People who just copy the package.json should be careful because the display for the double quotes in this content will miss :

"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig "./src/tsconfig.app.json""

Change it to:

"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""

@justin-tse
Copy link

justin-tse commented Jul 7, 2023

Update to this package.json

{
  "name": "ngx-admin",
  "version": "10.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"
  },
  "scripts": {
  "ng": "ng",
  "conventional-changelog": "conventional-changelog",
  "start": "ng serve",
  "build": "ng build",
  "build:prod": "npm run build -- --configuration production --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",
  "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
  },
  "dependencies": {
  "@angular/animations": "^14.2.12",
  "@angular/cdk": "14.2.7",
  "@angular/common": "^14.2.12",
  "@angular/compiler": "^14.2.12",
  "@angular/core": "^14.2.12",
  "@angular/forms": "^14.2.12",
  "@angular/google-maps": "^14.2.7",
  "@angular/platform-browser": "^14.2.12",
  "@angular/platform-browser-dynamic": "^14.2.12",
  "@angular/router": "^14.2.12",
  "@asymmetrik/ngx-leaflet": "3.0.1",
  "@nebular/auth": "10.0.0",
  "@nebular/eva-icons": "10.0.0",
  "@nebular/security": "10.0.0",
  "@nebular/theme": "10.0.0",
  "@swimlane/ngx-charts": "^14.0.0",
  "@types/ws": "^8.5.4",
  "angular2-chartjs": "0.4.1",
  "bootstrap": "4.3.1",
  "chart.js": "2.7.1",
  "ckeditor": "4.7.3",
  "classlist.js": "1.1.20150312",
  "core-js": "2.5.1",
  "echarts": "^4.9.0",
  "eva-icons": "^1.1.3",
  "intl": "1.2.5",
  "ionicons": "2.0.1",
  "leaflet": "1.2.0",
  "nebular-icons": "1.1.0",
  "ng2-ckeditor": "~1.2.9",
  "ng2-completer": "^9.0.1",
  "ng2-smart-table": "^1.6.0",
  "ngx-echarts": "^4.2.2",
  "node-sass": "^9.0.0",
  "normalize.css": "6.0.0",
  "pace-js": "1.0.2",
  "roboto-fontface": "0.8.0",
  "rxjs": "6.6.2",
  "rxjs-compat": "6.3.0",
  "socicon": "3.0.5",
  "style-loader": "^1.3.0",
  "tinymce": "4.5.7",
  "tslib": "^2.3.1",
  "typeface-exo": "0.0.22",
  "web-animations-js": "^2.3.2",
  "zone.js": "~0.11.4"
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "^14.2.10",
  "@angular-eslint/builder": "14.4.0",
  "@angular-eslint/eslint-plugin": "14.4.0",
  "@angular-eslint/eslint-plugin-template": "14.4.0",
  "@angular-eslint/schematics": "14.4.0",
  "@angular-eslint/template-parser": "14.4.0",
  "@angular/cli": "^14.2.10",
  "@angular/compiler-cli": "^14.2.12",
  "@angular/language-service": "14.2.12",
  "@compodoc/compodoc": "1.0.1",
  "@fortawesome/fontawesome-free": "^5.2.0",
  "@types/d3-color": "1.0.5",
  "@types/jasmine": "~3.3.0",
  "@types/jasminewd2": "2.0.3",
  "@types/leaflet": "1.2.3",
  "@types/node": "^12.12.70",
  "@typescript-eslint/eslint-plugin": "^5.36.2",
  "@typescript-eslint/parser": "^5.36.2",
  "codelyzer": "^6.0.2",
  "conventional-changelog-cli": "1.3.4",
  "eslint": "^8.23.0",
  "husky": "0.13.3",
  "jasmine-core": "~3.6.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~6.3.19",
  "karma-chrome-launcher": "~3.1.1",
  "karma-cli": "1.0.1",
  "karma-coverage-istanbul-reporter": "~3.0.2",
  "karma-jasmine": "~4.0.2",
  "karma-jasmine-html-reporter": "^1.7.0",
  "npm-run-all": "4.0.2",
  "protractor": "~7.0.0",
  "rimraf": "2.6.1",
  "stylelint": "7.13.0",
  "ts-node": "3.2.2",
  "tslint": "~6.1.0",
  "tslint-language-service": "^0.9.9",
  "typescript": "~4.6.4"
  }
}

@danmincu
Copy link

danmincu commented Jul 13, 2023

Tested this package.json works in Angular 16 - however one needs this line "@types/ws": "8.5.4", instead of "@types/ws": "^8.5.4", as ramymabrouk is suggesting above

@nikesh9220
Copy link

i found a solution on stackoverflow, Solution: npm install -f @types/[email protected], now it is running

thank you

This is working.
Node Version: 14.20.0

@ravindrajopo
Copy link

Still unable to install the application, lots of installation errors and finally gives up.

@ravindrajopo
Copy link

ravindrajopo commented Dec 23, 2023

  "name": "ngx-admin",
  "version": "10.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"
  },
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "npm run build -- --configuration production --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",
    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
  },
  "dependencies": {
    "@angular/animations": "^17.0.8",
    "@angular/cdk": "17.0.4",
    "@angular/common": "^17.0.8",
    "@angular/compiler": "^17.0.8",
    "@angular/core": "^17.0.8",
    "@angular/forms": "^17.0.8",
    "@angular/google-maps": "^17.0.4",
    "@angular/platform-browser": "^17.0.8",
    "@angular/platform-browser-dynamic": "^17.0.8",
    "@angular/router": "^17.0.8",
    "@asymmetrik/ngx-leaflet": "17.0.0",
    "@nebular/auth": "12.0.0",
    "@nebular/eva-icons": "12.0.0",
    "@nebular/security": "12.0.0",
    "@nebular/theme": "12.0.0",
    "@swimlane/ngx-charts": "^20.5.0",
    "@types/ws": "8.5.10",
    "angular2-chartjs": "0.5.1",
    "bootstrap": "5.3.2",
    "chart.js": "4.4.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "3.34.0",
    "echarts": "^5.4.3",
    "eva-icons": "^1.1.3",
    "intl": "1.2.5",
    "ionicons": "7.2.2",
    "leaflet": "1.9.4",
    "nebular-icons": "1.1.0",
    "ng2-ckeditor": "~1.3.7",
    "ng2-completer": "^9.0.1",
    "ng2-smart-table": "^1.7.2",
    "ngx-echarts": "^17.1.0",
    "node-sass": "^9.0.0",
    "normalize.css": "8.0.1",
    "pace-js": "1.2.4",
    "roboto-fontface": "0.10.0",
    "rxjs": "7.8.1",
    "rxjs-compat": "6.6.7",
    "socicon": "3.0.5",
    "style-loader": "^3.3.3",
    "tinymce": "6.8.2",
    "tslib": "^2.6.2",
    "typeface-exo": "1.1.13",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.8",
    "@angular-eslint/builder": "17.1.1",
    "@angular-eslint/eslint-plugin": "17.1.1",
    "@angular-eslint/eslint-plugin-template": "17.1.1",
    "@angular-eslint/schematics": "17.1.1",
    "@angular-eslint/template-parser": "17.1.1",
    "@angular/cli": "^17.0.8",
    "@angular/compiler-cli": "^17.0.8",
    "@angular/language-service": "17.0.8",
    "@compodoc/compodoc": "1.1.23",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@types/d3-color": "3.1.3",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "2.0.13",
    "@types/leaflet": "1.9.8",
    "@types/node": "^20.10.5",
    "@typescript-eslint/eslint-plugin": "^6.15.0",
    "@typescript-eslint/parser": "^6.15.0",
    "codelyzer": "^6.0.2",
    "conventional-changelog-cli": "4.1.0",
    "eslint": "^8.56.0",
    "husky": "8.0.3",
    "jasmine-core": "~5.1.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "npm-run-all": "4.1.5",
    "protractor": "~7.0.0",
    "rimraf": "5.0.5",
    "stylelint": "16.0.2",
    "ts-node": "10.9.2",
    "tslint": "~6.1.0",
    "tslint-language-service": "^0.9.9",
    "typescript": "~5.3.3"
  }
}

@subhadipghorui
Copy link
Author

npm i --force --legecy-peer-deps

will solve the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants