I created a new Angular 2 project with a new klw
- I installed bootstrap:
npm install bootstrap@next
added style and scripts in angular
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Built-in 4V bootstrap angular-cli: npm install --save @ng-bootstrap/ngbootstrap
- added NgbModule import to app.module.ts
- added to the NgbModule import section in app.module.ts
- changed app.module.html :
<NgbAlert> Alert text </NgbAlert>
What did I miss?
When I started ng serve, I got the following ERRORS:
ERROR in Error encountered resolving symbol values statically. Could not resolve @ng-bootstrap/ng-bootstrap relative to F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts., resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts, resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts
ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\jquery\dist\jquery.js' in 'F:\src\prjs\angular2\pilot\klw'
@ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'
ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'
@ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\js\bootstrap.js' in 'F:\src\prjs\angular2\pilot\klw'
@ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
ERROR in multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\css\bootstrap.css' in 'F:\src\prjs\angular2\pilot\klw'
@ multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css
ERROR in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts (8,25): Cannot find module '@ng-bootstrap/ng-bootstrap'.)
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap' in 'F:\src\prjs\angular2\pilot\klw\src\app'
@ ./src/app/app.module.ts 15:0-55
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.
source
share