search

akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.29k stars 7.96k forks source link

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

Open subhadipghorui opened 1 year ago

subhadipghorui commented 1 year ago

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 commented 1 year ago

Fixed. Requesting author to update the package.json.

ramymabrouk commented 1 year ago

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<V> | HTTPSServer<V> | undefined;

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

✖ Failed to compile. `

ramymabrouk commented 1 year ago

i found a solution on stackoverflow, Solution: npm install -f @types/ws@8.5.4, now it is running

thank you

justin-tse commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

i found a solution on stackoverflow, Solution: npm install -f @types/ws@8.5.4, now it is running

thank you

This is working. Node Version: 14.20.0

ravindrajopo commented 11 months ago

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

ravindrajopo commented 11 months ago 
  "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 commented 10 months ago

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

will solve the problem.