Bootstrap 4 - update incompatible

[HariPrasad-1493]

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]

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]

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]

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]

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