无法在Angular 2应用程序中添加引导程序

Question

I am trying to add the bootstrap class style.css file.When i am compiling the 
 application getting the below error.

style.css

@import "~bootstrap/dist/css/bootstrap.css";

**Myerror**

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css Module build failed: Error: Can't resolve '~bootstrap/dist/css/bootstrap.css' in 'F:\\guna\\dreamapp\\src' at onError (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\Resolver.js:61:15) at loggingCallbackWrapper (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\createInnerCallback.js:31:19) at runAfter (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\Resolver.js:158:4) at innerCallback (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\Resolver.js:146:3) at loggingCallbackWrapper (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\createInnerCallback.js:31:19) at next (F:\\guna\\dreamapp\\node_modules\\tapable\\lib\\Tapable.js:252:11) at F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\UnsafeCachePlugin.js:40:4 at loggingCallbackWrapper (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\createInnerCallback.js:31:19) at runAfte r (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\Resolver.js:158:4) at innerCallback (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\Resolver.js:146:3) at loggingCallbackWrapper (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\createInnerCallback.js:31:19) at next (F:\\guna\\dreamapp\\node_modules\\tapable\\lib\\Tapable.js:252:11) at innerCallback (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\Resolver.js:144:11) at loggingCallbackWrapper (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\createInnerCallback.js:31:19) at next (F:\\guna\\dreamapp\\node_modules\\tapable\\lib\\Tapable.js:249:35) at resolver.doResolve.createInnerCallback (F:\\guna\\dreamapp\\node_modules\\enhanced-resolve\\lib\\DescriptionFilePlugin.js:44:6) @ ./src/styles.css 4:14-138 @ multi ./src/styles.css

Answer 1

This seems to be an error with Angular CLI 1.6.4 try to roll back to 1.6.3 for now.

https://github.com/angular/angular-cli/issues/9080

Answer 2

There is most probably something wrong in the path to import bootstrap. I don't know whether or not it is a good practice to import it directly from CSS, but here is the Angular CLI way to get bootstrap:

npm install bootstrap@3 --save

And then in your .angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

NB: In case you want to use Bootstrap 4 alpha, to install it:

npm install bootstrap@4.0.0-beta.2 --save

and the name of the JS file to import is then bootstrap.bundle.min.js