使用webstorm2018版新建angular6项目引入adminLTE样式的正确做法

      最近在使用webstorm2018使用学习angular6.0系列项目，看慕课网视频讲到引入adminLTE作为入门学习，但是他的视频是基于angular4.0系列的，当我新建angular项目就已经是6.0系列了，按照样式还是有一些不一样，经过踩过一些坑之后，现在把新版本正确的方式贴出来。

   在webstorm控制台输入cnpm install --save admin-lte安装adminLTE样式框架，如项目有需要，可以继续安装bootstrap和jquery。如下如所示：我安装之后的文件目录

我之前就发现下载后在node_modules文件夹下除了我箭头表示的文件夹以外，还有一个前面没有下划线的admin-lte，我的经验告诉你们，这个没有下划线的引用无效！！！如下图所示：

在里面找到starter.html这个文件，将里面的div部分完全覆盖你自己创建的angular项目中的app.component.html，另外还需要在你新建的项目中index.html的body后面添加上starter.html中的body后面的样式，如下图所示：

 

 

最后，也是比较重要的，在angular.json文件中引入相应的css和js文件，注意路径一定是你通过cnpm下载adminLTE中的，不是你单独下载外面的bootstrap和js，具体参照starter.html中资源引入路径。如下如图所示：