CODEWITHSUNDEEP
angularjstwitter-bootstrapbootstrap-4
Russell D
Russell D

Reputation: 346

Bootstrap 4 and Angular 1.6.9 - page looks like css not applied

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 <nav> tag. When I try to view the page in the browser, the css is messed up and is not rendering as I expect the <nav> bar to render.

enter image description here

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:

enter image description here

enter image description here

This is my package.json file:

 {
   "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"
   }
 }

I am bundling the css and js files from the node_modules folders into a 3rd-party file using these gulp tasks:

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 }))
});

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!

Here is the index.html:

enter image description here

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 angular.bootstrap(document, ['ttab']); but this caused an error that bootstrap was already loaded, so I felt comfortable that it is doing what it should.

Upvotes: 1

Views: 1778

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14954

Bootstrap 4 is totally incompatible with Bootstrap 3 as it's almost a complete rewrite.

Solution:

Either load the css (as well as the corresponding js) files for Bootstrap 3 OR migrate to Bootstrap 4.

If you want to migrate, you'll need to manually adjust/change a lot of stuff.

Reference: http://getbootstrap.com/docs/4.0/migration/

If you want to continue using Bootstrap 3, you can use these links:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Also, Bootstrap 4.0.0 does not have Tether as a dependency. It uses popper.js instead.

Upvotes: 2

Related Questions