出現的問題

在使用npm安裝ng-bootstrap外掛的過程中，由於GFW，下載外網的依賴包會出現下載不完整的情況

導致如下的錯誤

npm WARN checkPermissions Missing write access to /usr/lib/node_modules/npm/node_modules/asap
npm WARN checkPermissions Missing write access to /usr/lib/node_modules/npm/node_modules/fstream
npm WARN checkPermissions Missing write access to
 
 /usr/lib/node_modules/npm/node_modules/fstream-npm
npm WARN checkPermissions Missing write access to /usr/lib/node_modules/npm/node_modules/normalize-git-url
npm WARN checkPermissions Missing write access to /usr/lib/node_modules/npm/node_modules/realize-package-specifier
......

通過查詢資料和一番摸索過後，才發現原來自己一直都在用npm，忘了用cnpm

解決這個問題過後，更加了解了cnpm帶來的好處，當然，它本來可以不用存在的，不隨便評價GFW，任何事物都有兩面性

這裡把出現的問題提供給大家，如果出現了相同的問題，可以試試這個解決方法，如果能解決最好，不能的話，推薦去StackOverflow去搜搜關鍵詞，多半能找到解決方法

安裝過程

更改npm的映象源

npm的初始源是國外的，速度會有點慢，也會導致依賴包下載不完整而出現各種各樣的怎麼都搜不到解決方法的問題

這裡可以配置淘寶的映象cnpm，以後把npm的指令改為cnpm即可

npm install -g cnpm --registry=https://registry.npm.taobao.org
 

如果選了淘寶的cnmp映象，應該設定一下，保證正常下載工具

ng set --global packageManager = cnpm

安裝ng-bootstrap

進入本地專案目錄，然後執行如下命令

cnpm install @ng-bootstrap/ng-bootstrap --save

配置

首先在app.modules.ts中新增如下程式碼

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

imports: [
    ... ,
    NgbModule.forRoot()
],

然後將bootstrap.min.css檔案放入assets/bootstrap/目錄下，並在style.css檔案中新增

@import "assets/bootstrap/bootstrap.min.css";

測試

在app.component.html中新增如下程式碼

<button type="button" class="btn btn-success">Press Me Hard</button>