Angular開發經驗總結(連載)

引入第三方樣式庫文件無效(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注解
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容