【Angular】Angular项目添加ng-bootstrap插件

出现的问题

---

在使用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是淘宝定制的淘宝NPM镜像

解决这个问题过后，更加了解了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中添加如下代码

Press Me Hard