Angular6 引入 adminLTE，adminLTE 代码拆分成组件

本文链接：https://blog.csdn.net/vily_luky/article/details/83347372

源码地址： https://github.com/yohitan12/AdminLTE-Angular6

此版本adminlte 为 2.3.11 版本， adminlte 2.4.8 超级简约版见--------

Angular6 引入 adminLTE2.4.8，adminLTE 代码拆分成组件，超级简约版

现在要在angular6 的项目里，集成adminLte ， E:\Project\angular\angularstart4

1：在package.json 添加依赖，然后执行 npm install

 "@types/bootstrap-datepicker": "0.0.11",
    "@types/bootstrap.v3.datetimepicker": "^4.17.41",
    "@types/daterangepicker": "^2.1.10",
    "@types/icheck": "^0.8.29",
    "@types/jquery-knob": "^1.2.29",
    "@types/jquery.slimscroll": "^1.3.31",
    "@types/jqueryui": "^1.11.35",
    "admin-lte": "2.3.11",
    "angular-datatables": "^6.0.0",
    "bootstrap": "^3.3.7",
    "bootstrap-datepicker": "^1.7.1",
    "bootstrap3-wysihtml5-bower": "^0.3.3",
    "datatables.net": "^1.10.18",
    "datatables.net-bs": "^1.10.18",
    "datatables.net-buttons": "^1.5.2",
    "datatables.net-buttons-dt": "^1.5.2",
    "daterangepicker": "^2.1.25",
    "font-awesome": "^4.7.0",
    "icheck": "^1.0.2",
    "ionicons": "^3.0.0",
    "jquery": "^3.2.1",
    "jquery-knob": "^1.2.11",
    "jquery-slimscroll": "^1.3.8",
    "jquery-sparkline": "^2.4.0",
    "jqueryui": "^1.11.1",
    "jszip": "^3.1.5",
    "moment": "^2.18.1",
    "morris.js": "^0.5.0",
    "raphael": "^2.2.7",

2：在 angular.json 里面，引入css 和 js ，注意该文件夹下有2个 styles 和 2个scripts ，添加到 root 下，不要添加到test下

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/ionicons/dist/css/ionicons.css",
              "src/_variables.less",
              "node_modules/icheck/skins/flat/blue.css",
              "node_modules/morris.js/morris.css",
              "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css",
              "node_modules/admin-lte/plugins/daterangepicker/daterangepicker.css",
              "node_modules/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css",
              "node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/jqueryui/jquery-ui.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/raphael/raphael.js",
              "node_modules/morris.js/morris.js",
              "node_modules/jquery-sparkline/jquery.sparkline.js",
              "node_modules/jquery-knob/dist/jquery.knob.min.js",
              "node_modules/moment/moment.js",
              "node_modules/daterangepicker/daterangepicker.js",
              "node_modules/bootstrap-datepicker/js/bootstrap-datepicker.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.js",
              "node_modules/icheck/icheck.js",
              "node_modules/datatables.net/js/jquery.dataTables.js",
              "node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js",

              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js",

              "node_modules/admin-lte/dist/js/app.js",
              "src/assets/js/adminLTEOptions.js",
              "src/assets/js/scripts.js"
            ]

3 ：引入需要的less 文件，在src 文件夹下新建file , _variables.less

@import "../node_modules/admin-lte/build/less/AdminLTE";
@import "../node_modules/admin-lte/build/less/skins/_all-skins";
@boxed-layout-bg-image-path: "/assets/img/boxed-bg.jpg";

4：在 styles.css 中添加全局样式

.no-data-available {
  text-align: center;
}

/*
   src/styles.css (i.e. your global style)
*/
.dataTables_empty {
  display: none;
}

div.dt-buttons{
  clear: both;
  margin: 15px 0 15px 0;
}

.dataTables_filter {
  float: right;
}

.dataTables_length {
  float: left;
}

5：在 assetes 中引入 adminLTEOptions.js ,