angular引用bootstrap_在Angular中使用本地Bootstrap3

I have created an Angular 2 app using Angular cli.

In the index.html, I am referring to bootstrap 3 on cdn and it works fine

Now, instead of using the bootstrap from cdn, I would like to use a local copy. So, I installed bootstrap using npm

npm install bootstrap@3

and then tried to provide a reference in the index.html file, which is inside src (parallel to node_modules)

however, this does not work and I see the below in browser console (when I load index.html)

Can someone please advice how to load bootstrap locally?

PS: I don't want to use Bootstrap4 as it is still in alpha

解决方案

In your .angular-cli.json file are scripts & styles properties which accept an array of string (your relative path to your npm package)

This is where you should reference your local javascript and css/scss/less files.

"styles": [

"styles.css",

"../node_modules/bootstrap/dist/css/bootstrap.css",

"../node_modules/font-awesome/css/font-awesome.css"

],

"scripts": [

"../node_modules/jquery/dist/jquery.js",

"../node_modules/bootstrap/dist/js/bootstrap.js"

],

Add your scripts here, when running ng serve these files will be created in your index.html file.

The Angular-CLI is a great choice to build apps with and it's only getting better.