引入第三方樣式庫文件無效(bootstrap)
嘗試解決方案一
使用了cnpm安裝,node_modules目錄下會生成下劃線_開頭的相應模塊,以jquery,bootstrap開頭的目錄實際上是快捷方式,指向相應的下劃線開頭的目錄下
在.angular-cli.json中的styles,scripts中分別填入:
"../node_modules/bootstrap/dist/css/bootstrap.css"
"../node_modules/jquery/dist/jquery.js"
"../node_modules/bootstrap/dist/js/bootstrap.js"
嘗試解決方案二
不使用cnpm而使用npm安裝,同時安裝jquery,bootstrap的typescript的加載模塊
npm install jquery --save
npm install bootstrap --save
npm install @types/jquery --save
npm install @types/bootstrap --save
這里的嘗試沒有效果,問題依舊存在
盡量用npm安裝,cnpm安裝感覺會出問題,以前沒感覺到有問題,最近剛裝的環境,感覺到有問題
最終解決
爬了兩天的坑,終于被自己挖出來了,感覺也被自己蠢哭了
樣式引入的路徑是沒有問題的,那為什么會出現bootstrap的部分樣式會失效了,最終我還是去了bootstrap的官網,一臉懵逼
bootstrap的V4版本和V3版本的API是不一樣的,引入方式也有所區別
V4版本還需要引入popper.js
npm install popper.js --save --registry=https://registry.npm.taobao.org
而npm install bootstrap
默認安裝的是最新版本,當前是V4.0.0版本,所以你會發現panel等以前V3里面的樣式不起作用了
總結
- 以后若想像以前一樣使用bootstrap的經典樣式,用npm安裝模塊的時候需要帶上版本號
npm install bootstrap@3
- 還有能用npm安裝盡量不要用cnpm安裝模塊,會有坑
- 有條件的可以使用代理下載
- 沒有條件的可以用國內的源,如淘寶的鏡像源
在angular中引入外部樣式
- .angular-cli.json中配置
"styles": [
"styles.scss",
"assets/..."
],
"scripts": [
"../node_modules/..."
]
- 在style.scss中引入cdn樣式
@import "~https://...";
- 在index.html中
<link rel="stylesheet" href="assets/xxx.css">
<script src="assets/xxx.js"></script>
創建ng項目時候,規定使用scss樣式
ng new project_name --style=scss
angular/cli安裝初的問題
ng new 應用時,install模塊時會有個build node-sass操作,用的是pyhon2的語法
所以如果你沒有裝python2.x的環境,或者是python3.x的版本,是會編譯報錯的
因為python2.x與python3.x的版本的語法是不一樣的
因此你需要安裝python2.x的版本,如python-2.7.6
安裝完之后,添加環境變量,命名為python2,指向你python的安裝目錄
找到剛剛報錯的目錄,命令行執行:
npm rebuild node-sass
然后繼續npm i后續沒有安裝完的包模塊
TS文件中如果需要使用依賴注入,需要使用@Injectable注解
我們使用的Component組件中可以直接在構造函數中使用依賴注入是因為,@Component注解中已經繼承了injectable注解