search

TwanoO67 / ngx-admin-lte

Admin LTE for Angular 2/4/6/8 as a NPM package
MIT License
108 stars 47 forks source link

Bootstrap 4 - update incompatible #94

Open HariPrasad-1493 opened 3 years ago

HariPrasad-1493 commented 3 years ago

Hi, I'm following the guide from adminLTe(current version 2.3) to upgrade to version 3.0 for which bootstrap 4 is a prerequisite.

But after update the adminLte appears to be broken for Bootstrap v4 and Angular v11.

Pls let me know if any configuration is required from ngx-admin-lte as the latest version seems to be 2 years old(3.0.0-beta.1)

HariPrasad-1493 commented 3 years ago

AdminErr PFA the screenshot of application & package.json for reference

{
  "name": "bootstraping-ngx-admin-lte",
  "version": "0.5.1",
  "license": "WTFPL",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "prod": "ng build --prod",
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.14",
    "@angular/common": "^11.2.14",
    "@angular/compiler": "^11.2.14",
    "@angular/core": "^11.2.14",
    "@angular/forms": "^11.2.14",
    "@angular/platform-browser": "^11.2.14",
    "@angular/platform-browser-dynamic": "^11.2.14",
    "@angular/router": "^11.2.14",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@ngx-loading-bar/http-client": "2.0.0",
    "@ngx-translate/core": "^12.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/colresizable": "^1.6.0",
    "admin-lte": "^3.0.0",
    "bootstrap": "^4.1.0",
    "bootstrap-datepicker": "^1.8.0",
    "chart.js": "^2.9.3",
    "colresizable": "^1.6.0",
    "core-js": "^2.6.4",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "ionicons": "^3.0.0",
    "jquery": "^3.6.0",
    "jquery-ui-dist": "^1.12.1",
    "lodash": "^4.17.21",
    "moment": "^2.24.0",
    "nestable": "^0.2.0",
    "ng-block-ui": "2.1.8",
    "ng2-charts": "^2.4.2",
    "ng2-dnd": "^5.0.2",
    "ng2-search-filter": "^0.5.1",
    "ngx-admin-lte": "^3.0.0-beta.1",
    "ngx-cookie-service": "^2.1.0",
    "ngx-order-pipe": "^2.0.2",
    "ngx-pagination": "^3.2.1",
    "ngx-toastr": "^11.1.0",
    "perfect-scrollbar": "^1.4.0",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "rxjs-tslint": "^0.1.8",
    "tslib": "^2.0.0",
    "utila": "^0.5.0-dev.1",
    "yarn": "^1.13.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.13",
    "@angular/cli": "^11.2.13",
    "@angular/compiler-cli": "^11.2.14",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~2.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.7",
    "webpack": "^4.4.1"
  }
}
TwanoO67 commented 3 years ago

Hi, The project has actually only been ported to angular8. But it's open to contribution if you like to port it on more récent angular stack

HariPrasad-1493 commented 3 years ago

Hi, The project has actually only been ported to angular8. But it's open to contribution if you like to port it on more récent angular stack

Hey, Angular 11 with ngx-admin-lte latest version was working fine with admin-lte v2.4 But after the update the to Bootstrap 4 which is a pre-requiste to admin-lte V3.0, the dashboard & layout is broken as seen in screenshot

TwanoO67 commented 3 years ago

I personnaly never had tried with admin lte 2.4 and recent angular version. (But this is interresting so if you have something working I would be glad to have that in a 3.0.0)

It seems that some step are needed to go from 2.3 https://adminlte.io/docs/2.4/upgrade-guide

Before going to v3 https://adminlte.io/docs/3.0/upgrade-guide.html

But yeah it's seems that a lot of templating inside ngx-admin-lte has to change before doing this update