I am trying to figure out how to get it all to work. The issue is that bootstrap isn't showing up in the dist version of the index page.
I am not 100% sure, but the .angular-cli.json is what I think is creating the webpack. This is the file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-beta.31",
"name": "webui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
When I run the app this is the error I get in the console:
Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:7:3482)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:7:12271)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:7:14333)
at eval (<anonymous>)
at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?e084:1)
at __webpack_require__ (bootstrap f1e578d…:54)
at Object.3 (scripts.bundle.js:52)
at __webpack_require__ (bootstrap f1e578d…:54)
at webpackJsonpCallback (bootstrap f1e578d…:25)
(anonymous) @ VM738:7
(anonymous) @ VM738:7
(anonymous) @ VM738:7
webpackJsonp.../../../../script-loader/addScript.js.module.exports @ addScript.js:9
../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js @ bootstrap.min.js?e084:1
__webpack_require__ @ bootstrap f1e578d…:54
3 @ scripts.bundle.js:52
__webpack_require__ @ bootstrap f1e578d…:54
webpackJsonpCallback @ bootstrap f1e578d…:25
(anonymous) @ scripts.bundle.js:1
vendor.bundle.js:55378 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
Note, there isn't a tether file as it mentions, but that wouldn't be causing this problem? Not sure why bootstrap isn't being connected to the dist
Have you tried installing and including tether?
Install with: npm i tether --save
and include by adding to the scripts
and styles
sections of your angular-cli.json
styles": [
"styles.css",
"../node_modules/tether/dist/css/tether.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.