title: Bootstrap 4 and Angular 1.6.9 - page looks like css not applied
body: <p>Started a new project (copied from an existing) using angularjs 1.6.9. The previous project used bootstrap v 3.3.7. When I ran the npm install, it installed bootstrap 4.0.0. It has a dependency on JQuery and Tether, no big deal. It wouldn't npm install JQuery, but was able to get past that (turned off anti-virus/internet security). I have an index.html page with my navigation directive that contains a Bootstrap <code>&lt;nav&gt;</code> tag. When I try to view the page in the browser, the css is messed up and is not rendering as I expect the <code>&lt;nav&gt;</code> bar to render. </p>
  
  <p><a href="https://i.stack.imgur.com/DtIAC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DtIAC.png" alt="enter image description here"></a></p>
  
  <p>Naturally, I think I have something wrong with my css link or the js files aren't included, but they are as I can see the bootstrap css when inspecting the element:</p>
  
  <p><a href="https://i.stack.imgur.com/3ZA1G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3ZA1G.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/yOrw1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yOrw1.png" alt="enter image description here"></a></p>
  
  <p>This is my package.json file:</p>
  
  <pre><code> {
     "name": "New site",
     "version": "1.0.0",
     "description": "A new site",
     "main": "app.js",
     "author": {
       "name": "user1",
       "email": ""
     },
     "dependencies": {
       "angular": "^1.6.9",
       "angular-jwt": "^0.1.9",
       "angular-route": "^1.6.9",
       "async": "^2.6.0",
       "bcrypt-nodejs": "0.0.3",
       "body-parser": "^1.18.2",
       "bootstrap": "^4.0.0",
       "dateformat": "^3.0.3",
       "express": "^4.16.2",
       "jquery": "^3.3.1",
       "jsonwebtoken": "^8.1.1",
       "mysql": "^2.15.0",
       "popper.js": "^1.12.9",
       "tether": "^1.4.3"
     },
     "devDependencies": {
       "browser-sync": "^2.23.6",
       "gulp": "^3.9.1",
       "gulp-autoprefixer": "^4.1.0",
       "gulp-cache": "^1.0.2",
       "gulp-concat": "^2.6.1",
       "gulp-imagemin": "^4.1.0",
       "gulp-jscs": "^4.1.0",
       "gulp-jshint": "^2.1.0",
       "gulp-notify": "^3.2.0",
       "gulp-plumber": "^1.2.0",
       "gulp-rename": "^1.2.2",
       "gulp-uglify": "^3.0.0",
       "jscs": "^3.0.7",
       "jshint": "^2.9.5",
       "jshint-stylish": "^2.2.1",
       "nodemon": "^1.15.0"
     }
   }
  </code></pre>
  
  <p>I am bundling the css and js files from the node_modules folders into a 3rd-party file using these gulp tasks:</p>
  
  <pre><code>gulp.task('3rd-party-scripts', function () {
      return gulp.src(['node_modules/jquery/dist/jquery.js',
              'node_modules/tether/dist/js/tether.js',
              'node_modules/bootstrap/dist/js/bootstrap.js',
              'node_modules/angular/angular.js',
              'node_modules/angular-route/angular-route.js',
              'node_modules/angular-jwt/dist/angular-jwt.js'])
          .pipe(plumber({
              errorHandler: function (error) {
                  console.log(error.message);
                  this.emit('end');
              }
              }))
          .pipe(concat('3rd-party.min.js'))
          .pipe(gulp.dest('public/dist/scripts/'))
          .pipe(browserSync.reload({ stream: true }))
  });
  
  gulp.task('3rd-party-styles', function () {
      return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.css'])
          .pipe(plumber({
              errorHandler: function (error) {
                  console.log(error.message);
                  this.emit('end');
              }
          }))
  
          .pipe(concat('3rd-party-styles.min.css'))
          .pipe(gulp.dest('public/dist/css/'))
          .pipe(browserSync.reload({ stream: true }))
  });
  </code></pre>
  
  <p>I've loaded the full files to debug even though the 3rd party files are named min.js and min.cs. They are loaded with no console errors. No 404 errors. And no bootstrap formatting!</p>
  
  <p>Here is the index.html:</p>
  
  <p><a href="https://i.stack.imgur.com/J0FjU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J0FjU.png" alt="enter image description here"></a></p>
  
  <p>It feels like the bootstrap.js is not executed. I played around with the order in the gulpfile when adding to the 3rd-party file. In my digging, I thought I might have to inject bootstrap into my angular module. Another try was calling <code>angular.bootstrap(document, ['ttab']);</code> but this caused an error that bootstrap was already loaded, so I felt comfortable that it is doing what it should.</p>