Angular 5中加载ngx-bootstrap CSS报错问题求助

嘿，这个问题我碰到过好几次了！本质是你在index.html里直接引用的路径没被Angular的构建系统正确解析，服务器找不到对应的CSS文件，返回的是404的HTML页面，所以浏览器检测到MIME类型是text/html而非text/css，就直接拒绝加载了。

给你几个靠谱的解决办法，按推荐程度排序：

方法1：通过angular-cli.json配置全局样式（官方推荐） #

这是最稳妥的方式，能确保样式被正确打包和加载：

1. 打开项目根目录下的angular-cli.json（如果是Angular 6+版本就是angular.json）
2. 找到styles数组，把ngx-bootstrap的CSS路径加进去：

   "styles": [
     "styles.css",
     "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
   ]
   

   路径要根据你的项目结构调整，要是angular-cli.json和node_modules都在项目根目录，这个路径就没问题。
3. 重启你的Angular开发服务器（ng serve），这样样式就会被正确打包到项目里了。

方法2：修正index.html里的引用路径（临时可用，不推荐生产环境） #

如果一定要在index.html里引用，得把路径改成服务器根目录的绝对路径：
把原来的链接改成：

<link href="/node_modules/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet"/>

去掉开头的../，因为Angular开发服务器的根是项目的内存目录（生产时是dist文件夹），直接从根开始找node_modules就行。不过这种方式别用到生产环境，因为生产构建后node_modules不会被打包到dist里，部署后肯定找不到文件。

方法3：在全局样式文件里导入 #

打开项目的styles.css（或styles.scss），直接导入这个CSS：

@import "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css";

Angular的构建系统会自动处理这个导入，把样式合并到全局样式文件里，完美避开路径问题。

为啥原来的方式不行？ #

你用../node_modules/...的时候，浏览器会从当前页面的URL（比如http://localhost:3000/）往上找一级，也就是http://localhost:3000/../node_modules/...，这显然不是正确的路径，服务器找不到文件就返回了404的HTML页面，MIME类型自然不对啦。

内容的提问来源于stack exchange，提问作者AniketGole