Below are the steps I have done for configuring the Bootstrap 4 in Angular 7.
Tested In Angular 7.0.0
Step 1 – Install the required dependencies
npm install bootstrap (if you want specific version please specify the version no.) npm install popper.js (if you want specific version please specify the version no.) npm install jquery
Versions I have tried:
"bootstrap": "^4.1.3", "popper.js": "^1.14.5", "jquery": "^3.3.1",
Step 2 : Specify the libraries in below order in angular.json. In latest angular , the config file name is angular.json not angular-cli.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
Mad Programmer 